{% extends "optimizer-base.html.twig" %}

{% block tab_content %}
    <form method="post" novalidate="novalidate">
        <input type="hidden" name="tab" value="settings"/>
        <input type="hidden" name="optimizer" value="shortpixel"/>
        {{ nonce | raw }}
        <table class="form-table" style="max-width: 900px;">
            <tbody>
            <tr class="user-display-name-wrap">
                <th><label for="display_name">{{ __('Shortpixel API Key') }}</label></th>
                <td>
                    <input type="text" name="api_key" value="{{ settings['API_KEY'] }}"
                           style="width: 230px;">
                    &nbsp;&nbsp;&nbsp;
                    <a href="https://shortpixel.com/otp/af/QDDDRHB707903" target="_blank">Get an API key</a>
                </td>
            </tr>
            <tr class="user-display-name-wrap">
                <th><label for="display_name">{{ __('Compression') }}</label></th>
                <td>
                    <p style="margin-bottom: 25px;">
                        <label for="lossy">
                            <input id="lossy" type="radio" name="lossy" value="1" {{ settings['lossy']==1?'checked':'' }}>
                            <b>Lossy</b>: creates the smallest optimised images you can get. If you want the best balance between optimisation and picture quality, go with this option.
                        </label></p>
                    <p style="margin-bottom: 25px;">
                        <label for="glossy">
                            <input id="glossy" type="radio" name="lossy" value="2" {{ settings['lossy']==2?'checked':'' }}>
                            <b>Glossy</b>: the best choice if you believe that a slight loss of page speed is an acceptable compromise for a top image quality.
                        </label>
                    </p>
                    <p style="margin-bottom: 25px;">
                        <label for="lossless">
                            <input id="lossless" type="radio" name="lossy" value="0" {{ settings['lossy']==0?'checked':'' }}>
                            <b>Lossless</b>: images are pixel-by-pixel identical with the originals. If you want your images to remain untouched with a small size reduction, go with this option.
                        </label></p>
                </td>
            </tr>
            </tbody>
        </table>

        <p class="submit">
            <button type="submit"
                    id="submit"
                    class="button button-primary"
            >{{ submit_label }}</button>
        </p>
    </form>
{% endblock %}