{% 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="{{ shortpixel_link }}"
                       target="_blank">{{ __('Get an API key','brizy') }}</a>
                </td>
            </tr>
            <tr class="user-display-name-wrap">
                <th><label for="display_name">{{ __('Compression','brizy') }}</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"
            >{{ __('Optimize images','brizy') }}</button>
        </p>
    </form>
{% endblock %}