<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Clipboard')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Plugins', 'title' => 'Clipboard')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Plugins', 'title' => 'Clipboard')) ?>

                    <div class="container">
<div class="card">
<div class="card-header">
<h4 class="card-title">Examples</h4>
</div>
<div class="card-body">
<div class="table-wrapper">
<table class="table">
<tbody>
<tr>
<td>
<h5 class="mb-1.25">Copy from Element</h5>
<p class="text-default-400 mb-2.5">
                                                        Use
                                                        <code>data-clipboard-target</code>
                                                        to copy text from a specific element.
                                                    </p>
</td>
<td class="w-1/2">
<p class="text-primary mb-4 font-normal" id="copytext">Click the button to copy this promotional text.</p>
<button class="btn btn-sm bg-primary hover:bg-primary-hover text-white" data-clipboard-target="#copytext">
<i class="iconify tabler--copy me-1"></i>
                                                        Copy Text
                                                    </button>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Cut from Textarea</h5>
<p class="text-default-400 mb-2.5">
                                                        Use
                                                        <code>data-clipboard-action</code>
                                                        with
                                                        <code>cut</code>
                                                        to remove and copy content.
                                                    </p>
</td>
<td class="w-1/2">
<textarea class="form-textarea" id="cuttext">This content will be cut and removed from this textarea.</textarea>
<button class="btn btn-sm bg-primary hover:bg-primary-hover mt-5 text-white" data-clipboard-action="cut" data-clipboard-target="#cuttext">
<i class="iconify tabler--copy me-1"></i>
                                                        Cut Content
                                                    </button>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Copy Email Address</h5>
<p class="text-default-400 mb-2.5">Click the button to copy this contact email:</p>
</td>
<td class="w-1/2">
<span class="text-primary block font-bold" id="emailToCopy">support@example.com</span>
<button class="btn btn-sm bg-primary hover:bg-primary-hover mt-2.5 text-white" data-clipboard-target="#emailToCopy">
<i class="iconify tabler--copy me-1"></i>
                                                        Copy Email
                                                    </button>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Cut Input Value</h5>
<p class="text-default-400 mb-2.5">This cuts the value from a single-line input field.</p>
</td>
<td class="w-1/2">
<input class="form-input" id="cutInput" type="text" value="Temporary token: 8GDF-393K-L99Z"/>
<button class="btn btn-sm bg-danger hover:bg-danger-hover mt-2 text-white" data-clipboard-action="cut" data-clipboard-target="#cutInput">
<i class="iconify tabler--copy me-1"></i>
                                                        Cut Token
                                                    </button>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Copy Code Snippet</h5>
<p class="text-default-400 mb-2.5">Copy this snippet by clicking the button:</p>
</td>
<td class="w-1/2">
<pre><code id="codeSnippet">npm install clipboard --save</code></pre>
<button class="btn btn-sm bg-success hover:bg-success-hover mt-4 text-white" data-clipboard-target="#codeSnippet">
<i class="iconify tabler--copy me-1"></i>
                                                        Copy Command
                                                    </button>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Copy from Input Group</h5>
<p class="text-default-400 mb-2.5">Click the copy icon to copy the link here:</p>
</td>
<td class="w-1/2">
<div class="input-group flex">
<input class="form-input" id="copyLink" readonly="" type="text" value="https://example.com/invite?ref=12345"/>
<button class="btn btn-icon bg-secondary text-white hover:bg-secondary-hover rounded-s-none" data-clipboard-target="#copyLink" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Copy Username</h5>
<p class="text-default-400 mb-2.5">Copy a predefined username from a span element.</p>
</td>
<td class="w-1/2">
<span class="text-primary block font-bold" id="copyUsername">john_doe_92</span>
<button class="btn btn-sm bg-primary hover:bg-primary-hover mt-2 text-white" data-clipboard-target="#copyUsername">
<i class="iconify tabler--copy me-1"></i>
                                                        Copy Username
                                                    </button>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Copy Discount Code</h5>
<p class="text-default-400 mb-2.5">Copy a promotional discount code for checkout.</p>
</td>
<td class="w-1/2">
<div class="input-group flex">
<input class="form-input" id="discountCode" readonly="" type="text" value="SAVE20NOW"/>
<button class="btn btn-icon bg-warning text-white" data-clipboard-target="#discountCode" type="button">
<i class="iconify tabler--copy text-lg"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<h5 class="mb-1.25">Copy HTML Template</h5>
<p class="text-default-400 mb-2.5">Copy a block of HTML code from a &lt;pre&gt; tag.</p>
</td>
<td class="w-1/2">
<code id="htmlTemplate">&lt;button class="btn bg-info text-white hover:bg-info-hover"&gt;Click Me&lt;/button&gt;</code>
<br/>
<button class="btn btn-sm bg-info hover:bg-info-hover mt-2 text-white" data-clipboard-target="#htmlTemplate">
<i class="iconify tabler--copy me-1"></i>
                                                        Copy HTML
                                                    </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <!-- Clipboard js -->
<script src="/plugins/clipboard/clipboard.min.js"></script>
<!-- Clipboard Plugin Js -->
<script src="/js/pages/plugins-clipboard.js"></script>
</body>
</html>