<?php if (!defined('ABSPATH')) {
    exit;
} ?>

<div class="crcpw-admin-page">
    <h1><?php esc_html_e('Cryptocurrency Price Widget', 'cryptocurrency-price-widget'); ?></h1>
    <hr>
    <div class="crcpw-row">
        <div class="crcpw-col-12 crcpw-col-lg-6">
            <h3><?php esc_html_e('Settings', 'cryptocurrency-price-widget'); ?>
            </h3>
            <form id="crcpw-widget-settings"
                data-slug="<?php echo esc_attr(CRCPW_PLUGIN_SLUG); ?>"
                data-search="<?php echo esc_attr__('Search', 'cryptocurrency-price-widget'); ?>..."
                data-base-search="<?php echo esc_attr__('Add fiat currency...', 'cryptocurrency-price-widget'); ?>"
                data-items-search="<?php echo esc_attr__('Add asset...', 'cryptocurrency-price-widget'); ?>"
                data-default-base="USD,EUR,CNY,GBP"
                data-default-items="BTC,ETH,LTC,XMR,DASH"
                data-clear-label="<?php echo esc_attr__('Clear', 'cryptocurrency-price-widget'); ?>"
                data-selected-label="<?php echo esc_attr__('Selected', 'cryptocurrency-price-widget'); ?>"
                data-searching-label="<?php echo esc_attr__('Searching...', 'cryptocurrency-price-widget'); ?>"
                data-no-results-label="<?php echo esc_attr__('No matches found.', 'cryptocurrency-price-widget'); ?>"
                data-max-selected-label="<?php echo esc_attr__('Remove one item to add another.', 'cryptocurrency-price-widget'); ?>"
                data-fiat-icon-base="<?php echo esc_url(CRCPW_URL . 'assets/fiat/128/'); ?>"
                data-crypto-icon-base="<?php echo esc_url('https://www.cryptocompare.com'); ?>"
                data-preview-url-base="<?php echo esc_url('https://co-in.io/' . ('en' !== $this->CRCPW_get_lang() ? $this->CRCPW_get_lang() . '/' : '') . 'widget/pricelist-preview/'); ?>"
                data-lang="<?php echo esc_attr($this->CRCPW_get_lang()); ?>"
                data-nonce="<?php echo esc_attr(wp_create_nonce('crcpw_nonce')); ?>"
                data-ajax-url="<?php echo esc_url(admin_url('admin-ajax.php')); ?>">
                <table class="form-table">
                    <tbody>
                        <tr>
                            <th scope="row">
                                <label for="crcpw-base"><?php esc_html_e('Select horizontal', 'cryptocurrency-price-widget'); ?></label>
                            </th>
                            <td>
                                <select id="crcpw-base" name="base" data-type="flags" multiple="multiple">
                                    <option value="USD" data-icon="/flags/us.png" data-fiat="1" selected>USD</option>
                                    <option value="EUR" data-icon="/flags/eu.png" data-fiat="1" selected>EUR</option>
                                    <option value="CNY" data-icon="/flags/cn.png" data-fiat="1" selected>CNY</option>
                                    <option value="GBP" data-icon="/flags/gb.png" data-fiat="1" selected>GBP</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="crcpw-items"><?php esc_html_e('Select vertical', 'cryptocurrency-price-widget'); ?></label>
                            </th>
                            <td>
                                <select id="crcpw-items" class="crcpw-form-control" name="items" data-type="coins"
                                    multiple="multiple">
                                    <?php foreach (['BTC', 'ETH', 'LTC', 'XMR', 'DASH'] as $crcpw_symbol) : ?>
                                        <?php $crcpw_coin = $this->CRCPW_get_coin_option($crcpw_symbol); ?>
                                        <option value="<?php echo esc_attr($crcpw_symbol); ?>"
                                            data-icon="<?php echo esc_attr($crcpw_coin['icon_path']); ?>"
                                            data-icon-url="<?php echo esc_url($crcpw_coin['icon_url']); ?>"
                                            data-name="<?php echo esc_attr($crcpw_coin['name']); ?>"
                                            selected><?php echo esc_html($crcpw_symbol); ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label for="crcpw-background-color"><?php esc_html_e('Color', 'cryptocurrency-price-widget'); ?></label>
                            </th>
                            <td>
                                <input id="crcpw-background-color" name="backgroundColor" type="text" value="#fff"
                                    class="color-field">
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <label><?php esc_html_e('Options', 'cryptocurrency-price-widget'); ?></label>
                            </th>
                            <td>
                                <div>
                                    <input type="checkbox" name="streaming" class="crcpw-form-check-input" id="crcpw-streaming"
                                        value="1" checked="">
                                    <label class="crcpw-form-check-label" for="crcpw-streaming">⚡<?php esc_html_e('Streaming data', 'cryptocurrency-price-widget'); ?>
                                        <small>(<?php esc_html_e('Prices are updated real-time', 'cryptocurrency-price-widget'); ?></small></label>
                                </div>
                                <div>
                                    <input type="checkbox" name="striped" class="crcpw-form-check-input" id="crcpw-striped"
                                        value="1">
                                    <label class="crcpw-form-check-label" for="crcpw-striped"><?php esc_html_e('Striped', 'cryptocurrency-price-widget'); ?></label>
                                </div>
                                <div>
                                    <input type="checkbox" name="rounded" class="crcpw-form-check-input" id="crcpw-rounded"
                                        value="1" checked="">
                                    <label class="crcpw-form-check-label" for="crcpw-rounded"><?php esc_html_e('Rounded', 'cryptocurrency-price-widget'); ?></label>
                                </div>
                                <div>
                                    <input type="checkbox" name="boxShadow" class="crcpw-form-check-input" id="crcpw-box-shadow"
                                        value="1" checked="">
                                    <label class="crcpw-form-check-label" for="crcpw-box-shadow"><?php esc_html_e('Shadow', 'cryptocurrency-price-widget'); ?></label>
                                </div>
                                <div>
                                    <input type="checkbox" name="border" class="crcpw-form-check-input" id="crcpw-border" value="1"
                                        checked="">
                                    <label class="crcpw-form-check-label" for="crcpw-border"><?php esc_html_e('Border', 'cryptocurrency-price-widget'); ?></label>
                                </div>
                                <div>
                                    <input type="checkbox" name="signature" class="crcpw-form-check-input" id="crcpw-signature"
                                        value="1" checked="">
                                    <label class="crcpw-form-check-label" for="crcpw-signature"><?php esc_html_e('Signature', 'cryptocurrency-price-widget'); ?></label>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <div class="crcpw-col-12 crcpw-col-lg-auto">
            <h3><?php esc_html_e('Preview', 'cryptocurrency-price-widget'); ?></h3>
            <div class="crcpw-pricelist-widget">
                <iframe id="crcpw-widget-preview" title="<?php echo esc_attr('Preview', 'cryptocurrency-price-widget'); ?>"></iframe>
                <div id="crcpw-widget-preview-attribution" class="crcpw-attribution crcpw-attribution--admin">
                    <span class="crcpw-attribution__label"><?php esc_html_e('Source:', 'cryptocurrency-price-widget'); ?></span>
                    <a class="crcpw-attribution__link" href="https://currencyrate.today/" target="_blank" rel="noopener noreferrer">CurrencyRate.Today</a>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="crcpw-row">
        <div class="crcpw-col-12 crcpw-col-lg-6">
            <h3><?php esc_html_e('Shortcode', 'cryptocurrency-price-widget'); ?></h3>
            <?php wp_editor("", 'crcpw-widget-code', ['wpautop' => 1, 'media_buttons' => 0, 'textarea_name' => '', 'textarea_rows' => 3, 'tabindex' => null, 'teeny' => 0, 'dfw' => 0, 'tinymce' => 0, 'quicktags' => 0, 'drag_drop_upload' => false]); ?>
            <div class="crcpw-shortcode-actions">
                <button type="button"
                    id="crcpw-copy-shortcode"
                    class="button button-secondary"
                    data-copied-label="<?php echo esc_attr__('Copied.', 'cryptocurrency-price-widget'); ?>"
                    data-copy-failed-label="<?php echo esc_attr__('Copy failed. Select the shortcode and copy it manually.', 'cryptocurrency-price-widget'); ?>">
                    <?php esc_html_e('Copy shortcode', 'cryptocurrency-price-widget'); ?>
                </button>
                <span id="crcpw-copy-shortcode-status" class="crcpw-shortcode-copy-status" aria-live="polite"></span>
            </div>
            <p>
                <b><?php esc_html_e('How to install', 'cryptocurrency-price-widget'); ?>:</b>
                <b><?php esc_html_e('Advice', 'cryptocurrency-price-widget'); ?>:</b>
                <?php esc_html_e('you\'ll can add shortcode anywhere: post, page and etc', 'cryptocurrency-price-widget'); ?>.
            </p>
        </div>
        <div class="crcpw-col-12 crcpw-col-lg-auto">
            <h3><?php esc_html_e('Note', 'cryptocurrency-price-widget'); ?></h3>
            <div class="crcpw-card">
                <p>
                    <?php esc_html_e('We do everything so that you use this plugin for free', 'cryptocurrency-price-widget'); ?>.<br>
                    <?php esc_html_e('To make the plugin work in further — rate it please', 'cryptocurrency-price-widget'); ?>.<br>
                    <a href="https://wordpress.org/support/plugin/cryptocurrency-price-widget/reviews/#new-post"
                        target="_blank" rel="noopener">★ ★ ★ ★ ★</a>
                </p>
                <hr>
                <?php esc_html_e('Cryptocurrency Widgets for Website', 'cryptocurrency-price-widget'); ?>
                <a href="https://co-in.io/" target="_blank" rel="noopener">CO-IN.IO</a><br>
                <span class="crcpw-attribution crcpw-attribution--note">
                    <span class="crcpw-attribution__label"><?php esc_html_e('Source:', 'cryptocurrency-price-widget'); ?></span>
                    <a class="crcpw-attribution__link" href="https://currencyrate.today/" target="_blank" rel="noopener noreferrer">CurrencyRate.Today</a>
                </span>
                <span class="crcpw-plugin-version">
                    <span class="crcpw-plugin-version__label"><?php esc_html_e('Plugin version:', 'cryptocurrency-price-widget'); ?></span>
                    <strong><?php echo esc_html(CRCPW_VERSION); ?></strong>
                </span>
            </div>
        </div>
    </div>
</div>
