<?php

if (!defined('ABSPATH')) exit;

?><article class="instalink-admin-page-widgets instalink-admin-page" data-il-admin-page-id="widgets">
    <div class="instalink-admin-page-heading">
        <h2><?php _e('Widgets', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></h2>

        <a class="instalink-admin-page-widgets-add-new instalink-admin-button-green instalink-admin-button" href="#/add-widget/" data-il-admin-page="add-widget"><?php _e('Add widget', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></a>

        <div class="instalink-admin-page-heading-subheading"><?php _e('Create, edit or remove your Instagram widgets. Use their shortcodes to insert them into the desired place.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>
    </div>

    <table class="instalink-admin-page-widgets-list">
        <thead>
            <tr>
                <th><span><?php _e('Name', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span></th>
                <th><span><?php _e('Shortcode', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span></th>
                <th><span><?php _e('Actions', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span></th>
            </tr>
        </thead>

        <tbody></tbody>
    </table>

    <template class="instalink-admin-template-widgets-list-item instalink-admin-template">
        <tr class="instalink-admin-page-widgets-list-item">
            <td class="instalink-admin-page-widgets-list-item-name"><a href="#" data-il-admin-page="edit-widget"></a></td>

            <td class="instalink-admin-page-widgets-list-item-shortcode">
                <span class="instalink-admin-page-widgets-list-item-shortcode-hidden"></span>

                <input type="text" class="instalink-admin-page-widgets-list-item-shortcode-value" readonly></input>

                <div class="instalink-admin-page-widgets-list-item-shortcode-copy">
                    <span class="instalink-admin-page-widgets-list-item-shortcode-copy-trigger"><span>Copy</span></span>
                    
                    <div class="instalink-admin-page-widgets-list-item-shortcode-copy-error">Press Cmd+C to copy</div>
                </div>
            </td>

            <td class="instalink-admin-page-widgets-list-item-actions">
                <a href="#" class="instalink-admin-page-widgets-list-item-actions-edit"><?php _e('Edit', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></a>
                <a href="#" class="instalink-admin-page-widgets-list-item-actions-duplicate"><?php _e('Duplicate', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></a>
                <a href="#" class="instalink-admin-page-widgets-list-item-actions-remove"><?php _e('Remove', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></a>

                <span class="instalink-admin-page-widgets-list-item-actions-restore">
                    <span class="instalink-admin-page-widgets-list-item-actions-restore-label"><?php _e('The widget has been removed.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>
                    <a href="#"><?php _e('Restore it', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></a>
                </span>
            </td>
        </tr>
    </template>

     <template class="instalink-admin-template-widgets-list-empty instalink-admin-template">
        <tr class="instalink-admin-page-widgets-list-empty-item">
            <td class="instalink-admin-page-widgets-list-empty-item-text" colspan="3">
                <?php _e('No InstaLink widgets yet.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                <a href="#/add-widget/" data-il-admin-page="add-widget"><?php _e('Create the first one.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></a>
            </td>
        </tr>
    </template>
</article>
