{# Browser config form fields for the add/edit page. Expects `form`, `caps` (the base engine's
   capability dict) and `base_label` (read-only base engine name). The base engine is fixed by
   the page (chosen via the "Add variation" link, or the existing config's base), so it's shown
   read-only, not as a picker. Fields are gated server-side by `caps`. #}
{% from '_helpers.html' import render_field, render_checkbox_field %}

<fieldset>
    <div class="pure-control-group">
        <label>{{ _('Based on browser') }}</label>
        <div><strong>{{ base_label }}</strong></div>
    </div>
    <div class="pure-control-group">
        {{ render_field(form.label) }}
        <span class="pure-form-message-inline">{{ _('A friendly name, e.g. “Mobile” or “German desktop”.') }}</span>
    </div>
    {% if caps.supports_browser_type %}
    <div class="pure-control-group">
        {{ render_field(form.browser_type) }}
        <span class="pure-form-message-inline">{{ _('Which browser engine to launch locally.') }}</span>
    </div>
    {% endif %}
    {% if caps.supports_delete_created_files %}
    <div class="pure-control-group">{{ render_checkbox_field(form.delete_created_files) }}</div>
    {% endif %}
</fieldset>

{% if caps.supports_screenshots %}
<fieldset>
    <legend>{{ _('Screen size') }}</legend>
    <div class="pure-control-group">
        <div class="viewport-presets">
            <button type="button" class="pure-button button-small" data-w="1920" data-h="1080">{{ _('Desktop') }}</button>
            <button type="button" class="pure-button button-small" data-w="1366" data-h="768">{{ _('Laptop') }}</button>
            <button type="button" class="pure-button button-small" data-w="768" data-h="1024">{{ _('Tablet') }}</button>
            <button type="button" class="pure-button button-small" data-w="390" data-h="844">{{ _('Mobile') }}</button>
            <button type="button" class="pure-button button-small" data-w="" data-h="">{{ _('Clear') }}</button>
        </div>
    </div>
    <div class="pure-control-group">{{ render_field(form.viewport_width) }}</div>
    <div class="pure-control-group">{{ render_field(form.viewport_height) }}</div>
</fieldset>

<fieldset>
    <legend>{{ _('Language & timezone') }}</legend>
    <div class="pure-control-group">
        {{ render_field(form.locale) }}
        <datalist id="locale-datalist">
            {% for l in locale_choices or [] %}<option value="{{ l }}"></option>{% endfor %}
        </datalist>
        <span class="pure-form-message-inline">{{ _('Start typing to search - e.g. <code>de-DE</code>, <code>en-GB</code>.')|safe }}</span>
    </div>
    <div class="pure-control-group">
        {{ render_field(form.timezone_id) }}
        <datalist id="timezone-datalist">
            {% for tz in timezone_choices or [] %}<option value="{{ tz }}"></option>{% endfor %}
        </datalist>
        <span class="pure-form-message-inline">{{ _('Start typing to search - e.g. <code>Europe/Berlin</code>.')|safe }}</span>
    </div>
</fieldset>
{% endif %}

{% if caps.supports_request_timeout or caps.supports_custom_user_agent %}
<fieldset>
    <legend>{{ _('HTTP request options') }}</legend>
    {% if caps.supports_request_timeout %}
    <div class="pure-control-group">
        {{ render_field(form.timeout) }}
        <span class="pure-form-message-inline">{{ _('Maximum seconds to wait for the response (plain HTTP client only).') }}</span>
    </div>
    {% endif %}
    {% if caps.supports_custom_user_agent %}
    <div class="pure-control-group">
        {{ render_field(form.user_agent) }}
        <span class="pure-form-message-inline">{{ _('Sent as the User-Agent header for requests using this browser.') }}</span>
    </div>
    {% endif %}
</fieldset>
{% endif %}

{% if caps.supports_request_blocking %}
<fieldset>
    <legend>{{ _('Skip downloads (save bandwidth)') }}</legend>
    <div class="pure-control-group">
        <label>{{ form.block_resource_types.label.text }}</label>
        <div class="browser-inline-checkboxes">
            {% for opt in form.block_resource_types %}
            <span class="checkbox">{{ opt() }} <label for="{{ opt.id }}">{{ opt.label.text }}</label></span>
            {% endfor %}
        </div>
    </div>
    <div class="pure-control-group">
        {{ render_field(form.block_url_patterns) }}
        <span class="pure-form-message-inline">{{ _('One address pattern per line, e.g. <code>*.ttf</code>.')|safe }}</span>
    </div>
</fieldset>
{% endif %}

{% if caps.supports_screenshots %}
<fieldset>
    <div class="pure-control-group">{{ render_field(form.screenshot_format) }}</div>
</fieldset>
{% endif %}

<script>
(function () {
    var w = document.getElementById('{{ form.viewport_width.id }}');
    var h = document.getElementById('{{ form.viewport_height.id }}');
    document.querySelectorAll('.viewport-presets button').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (w) w.value = this.getAttribute('data-w');
            if (h) h.value = this.getAttribute('data-h');
        });
    });
})();
</script>
<style>
.viewport-presets { display:flex; flex-wrap:wrap; gap:0.4em; }
.browser-inline-checkboxes { display:flex; flex-wrap:wrap; gap:0.4em 1.2em; }
.browser-inline-checkboxes .checkbox { white-space:nowrap; }
</style>