<?php

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

?><article class="instalink-admin-page-edit-widget instalink-admin-page" data-il-admin-page-id="edit-widget">
    <div class="instalink-admin-page-heading">
        <a class="instalink-admin-page-back-button" href="#/widgets/" data-il-admin-page="widgets">
            <svg class="instalink-admin-svg-arrow-back">
                <line x1="0.5" y1="4.5" x2="4.5" y2="0"></line>
                <line x1="0.5" y1="4.5" x2="4.5" y2="8.5"></line>
            </svg>
            <?php _e('Back to list', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
        </a>

        <h2 class="instalink-admin-page-edit-widget-title-add"><?php _e('Add Widget', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></h2>

        <h2 class="instalink-admin-page-edit-widget-title-edit"><?php _e('Edit Widget', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></h2>

        <div class="instalink-admin-page-heading-subheading"><?php _e('Name your widget, adjust options and save it. In the widgets list you will see the shortcode of your new widget, which you can copy paste in the desired place of your website.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>
    </div>

    <div class="instalink-admin-divider"></div>

    <div class="instalink-admin-page-edit-widget-form">
        <div class="instalink-admin-page-edit-widget-form-field">
            <label>
                <span class="instalink-admin-page-edit-widget-form-field-label"><?php _e('Widget name', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>

                <input class="instalink-admin-page-edit-widget-name-input" type="text" name="widgetName">
            </label>        

            <div class="instalink-admin-page-edit-widget-form-field-hint">
                <?php _e('Give any name to your widget. It will be displayed only in your admin panel.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
            </div>
        </div>

        <div class="instalink-admin-divider"></div>

        <div class="instalink-admin-page-edit-widget-form-field">
            <div class="instalink-admin-page-edit-widget-form-field-label"><?php _e('Adjust options', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>
            
            <div class="instalink-admin-demo-container"></div>

            <template class="instalink-admin-template-demo instalink-admin-template">
                <?php require_once(ELFSIGHT_INSTALINK_PATH . implode(DIRECTORY_SEPARATOR, array('includes', 'admin', 'instalink-demo.php'))); ?>
            </template>

             <script>
                function getInstaLinkDefaults() {
                    return <?php echo json_encode($instalink_json); ?>;
                }
            </script>
        </div>

        <div class="instalink-admin-page-edit-widget-form-field">
            <div class="instalink-admin-page-edit-widget-form-submit instalink-admin-button-large instalink-admin-button-green instalink-admin-button"><?php _e('Save widget', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>
        </div>
    </div>
</article>