<div class="wrap">
    <style>
        .avlex-api-input-box {
            display: inline-block;
            position: relative;
        }

        .avlex-api-input-box>span.dashicons {
            position: absolute;
            right: 5px;
            top: 3px;
            color: green;
            font-size: 1.4rem;
        }

        .debug-info {
            margin-top: 50px;
        }

        .dse-preview {
            background-color: #fff;
            padding: 20px;
            overflow: auto;
            height: 300px;
        }

        @media only screen and (max-width: 780px) {
            .avlex-api-input-box>span.dashicons {
                position: absolute;
                right: 5px;
                top: 10px;
                color: green;
                font-size: 1.4rem;
            }
        }

        .avlex-api-input-box>input {
            padding-right: 20px;
            width: 200px;
        }
    </style>
    <h1>avalex Einstellungen</h1>

    <?php $this->addNotice(); ?>

    <form method="post" novalidate="novalidate">
        <table class="form-table">
            <tbody>
                <tr>
                    <th scope="row">
                        <label for="avalex_api_key">API Key</label>
                    </th>
                    <td>
                        <div class="avlex-api-input-box">
                            <input type="text" name="avalex_api_key" id="avalex_api_key" value="<?php $this->showApiKey(); ?>">
                            <?php if ($this->isKeyValid): ?>
                            <span class="dashicons dashicons-yes"></span>
                            <?php endif; ?>
                            <div style="margin-top:5px">
                                <?php if ($this->isKeyValid): ?>
                                <span style="color:#008000"> Der API Key ist gültig.</span>
                                <?php endif; ?>
                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <p class="submit">
            <input type="hidden" id="save_avalex" name="save_avalex" value="1" />
            <input type="submit" name="submit" id="submit" class="button button-primary" value="Speichern" />
        </p>
        <h2>Shortcodes</h2>
        <style>
            .wp-list-table input {
                max-width: 210px;
				width: 100%;
            }
        </style>
        <table class="wp-list-table widefat fixed striped">
            <thead>
                <tr>
                    <th>Shortcode</th>
                    <th>Typ</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" readonly value="[avalex_de_datenschutz]" onfocus="this.select()">
                    </td>
                    <td>
                        Datenschutzerklärung
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" readonly value="[avalex_de_impressum]" onfocus="this.select()">
                    </td>
                    <td>
                        Impressum
                    </td>
                </tr>
                <?php if ($this->getDseFromDatabase('agb')): ?>
                <tr>
                    <td>
                        <input type="text" readonly value="[avalex_de_agb]" onfocus="this.select()">
                    </td>
                    <td>
                        AGB
                    </td>
                </tr>
                <?php endif; ?>
                <?php if ($this->getDseFromDatabase('widerruf')): ?>
                <tr>
                    <td>
                        <input type="text" readonly value="[avalex_de_widerrufsbelehrung]" onfocus="this.select()">
                    </td>
                    <td>
                        Widerrufsbelehrung
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </form>

    
    <div class="debug-info">
        <h2><?php _e('Debug-Informationen', 'Avalex'); ?>
        </h2>
        <p>
            <strong>Übermittelte Domain:</strong>
            <?php echo $this->trimDomain(home_url('/')); ?>
        </p>
        <?php if ($this->isKeyValid): ?>
        <p>
            <strong>Letztes Update der avalex Rechtstexte: </strong>
            <?php $this->getDseTime(); ?>
        </p>
       
        <?php if ($this->getDseFromDatabase('dse')): ?>
        <h3>Vorschau der Datenschutzerklärung (Design kann abweichen)</h3>
        <div class="dse-preview">
            <?php echo $this->getDseFromDatabase('dse'); ?>
        </div>
        <?php endif; ?>
        <?php if ($this->getDseFromDatabase('imprint')): ?>
        <h3>Vorschau des Impressums (Design kann abweichen)</h3>
        <div class="dse-preview">
            <?php echo $this->getDseFromDatabase('imprint'); ?>
        </div>
        <?php endif; ?>
        <?php if ($this->getDseFromDatabase('agb')): ?>
        <h3>Vorschau der AGB (Design kann abweichen)</h3>
        <div class="dse-preview">
            <?php echo $this->getDseFromDatabase('agb'); ?>
        </div>
        <?php endif; ?>
        <?php if ($this->getDseFromDatabase('widerruf')): ?>
        <h3>Vorschau der Widerrufsbelehrung (Design kann abweichen)</h3>
        <div class="dse-preview">
            <?php echo $this->getDseFromDatabase('widerruf'); ?>
        </div>
        <?php endif; ?>
        <?php endif; ?>
    </div>
   

</div>