{% extends 'base.html' %}
{% block content %}
{% from '_helpers.html' import render_field, render_checkbox_field, render_button %}

<div class="edit-form">
    <div class="box-wrap inner">
        <h2>{{ _('Browser Profiles') }}</h2>
        <p>{{ _('Create named profiles to configure browser settings — viewport size, connection URL, image/font blocking, and more. Each profile is based on an available browser type.') }}</p>

        <form id="set-default-form" action="{{ url_for('settings.settings_browsers.set_default') }}" method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="machine_name" id="default-machine-name" value="">
        </form>
        {% if browser_profiles %}
        <table class="pure-table pure-table-striped" style="width:100%; margin-bottom:1.5em;">
            <thead>
                <tr>
                    <th style="width:2.5em; text-align:center;" title="{{ _('System default') }}">{{ _('Default') }}</th>
                    <th>{{ _('Name') }}</th>
                    <th>{{ _('Type') }}</th>
                    <th style="width:3em; text-align:center;"></th>
                    <th>{{ _('Viewport') }}</th>
                    <th>{{ _('Options') }}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            {% for machine_name, profile in browser_profiles.items() %}
                <tr>
                    <td style="text-align:center;">
                        <input type="radio"
                               name="default_profile"
                               value="{{ machine_name }}"
                               title="{{ _('Set as system default') }}"
                               {% if machine_name == current_default_profile %}checked{% endif %}
                               onchange="setDefaultProfile('{{ machine_name }}')">
                    </td>
                    <td>{{ profile.name }}</td>
                    <td><code>{{ profile.fetch_backend }}</code></td>
                    <td style="text-align:center;">{{ profile.get_fetcher_class_name()|fetcher_status_icons }}</td>
                    <td>{{ profile.viewport_width }}×{{ profile.viewport_height }}</td>
                    <td style="font-size:0.8em; line-height:1.6;">
                        {% if profile.block_images %}{{ _('No images') }}<br>{% endif %}
                        {% if profile.block_fonts %}{{ _('No fonts') }}<br>{% endif %}
                        {% if profile.ignore_https_errors %}{{ _('Ignore TLS') }}<br>{% endif %}
                        {% if profile.browser_connection_url %}<span title="{{ profile.browser_connection_url }}">{{ _('Custom URL') }}</span>{% endif %}
                    </td>
                    <td style="white-space:nowrap;">
                        {% if not profile.is_builtin %}
                        <a href="{{ url_for('settings.settings_browsers.edit', machine_name=machine_name) }}"
                           class="pure-button button-small">{{ _('Edit') }}</a>
                        <a href="{{ url_for('settings.settings_browsers.delete', machine_name=machine_name) }}"
                           class="pure-button button-small button-error"
                           onclick="return confirm('{{ _('Delete this browser profile?') }}')">{{ _('Delete') }}</a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p style="color:#888; font-style:italic;">{{ _('No browser profiles configured yet. Add one below.') }}</p>
        {% endif %}

        <div class="border-fieldset">
            <h3 id="profile-form-heading">{{ _('Edit browser profile') if editing_machine_name else _('Add new browser profile') }}</h3>
            {% if not editing_machine_name %}
            <p style="font-size:0.9em; color:#666;">{{ _('Choose a browser type, give it a name, and configure its settings. You can create multiple profiles from the same type with different connection URLs or options.') }}</p>
            {% endif %}
            <form class="pure-form pure-form-stacked"
                  id="browser-profile-form"
                  action="{{ url_for('settings.settings_browsers.save') }}"
                  method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="original_machine_name" id="original_machine_name" value="{{ editing_machine_name or '' }}">
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(browser_profile_form.name) }}
                    </div>
                    <div class="pure-control-group inline-radio">
                        {{ render_field(browser_profile_form.fetch_backend, id="profile-fetch-backend") }}
                    </div>
                    <div class="pure-control-group browser-only-field cdp-only-field">
                        {{ render_field(browser_profile_form.browser_connection_url) }}
                        <span class="pure-form-message-inline">{{ _('Optional — override the system CDP/WebSocket URL for this profile only (e.g.') }} <code>ws://my-chrome:3000</code>).</span>
                    </div>
                    <div class="pure-control-group browser-only-field" style="display:flex; gap:1em; flex-wrap:wrap;">
                        <div>{{ render_field(browser_profile_form.viewport_width) }}</div>
                        <div>{{ render_field(browser_profile_form.viewport_height) }}</div>
                    </div>
                    <div class="pure-control-group browser-only-field">
                        {{ render_checkbox_field(browser_profile_form.block_images) }}
                        <span class="pure-form-message-inline">{{ _('Block image downloads — speeds up loads on image-heavy pages.') }}</span>
                    </div>
                    <div class="pure-control-group browser-only-field">
                        {{ render_checkbox_field(browser_profile_form.block_fonts) }}
                        <span class="pure-form-message-inline">{{ _('Block web font downloads.') }}</span>
                    </div>
                    <div class="pure-control-group browser-only-field">
                        {{ render_checkbox_field(browser_profile_form.ignore_https_errors) }}
                        <span class="pure-form-message-inline">{{ _('Ignore TLS/HTTPS certificate errors (useful for self-signed certs on staging sites).') }}</span>
                    </div>
                    <div class="pure-control-group browser-only-field">
                        {{ render_field(browser_profile_form.user_agent) }}
                        <span class="pure-form-message-inline">{{ _("Leave blank to use the fetcher's default User-Agent.") }}</span>
                    </div>
                    <div class="pure-control-group browser-only-field">
                        {{ render_field(browser_profile_form.locale) }}
                        <span class="pure-form-message-inline">{{ _('Sets Accept-Language and navigator.language (e.g. en-US, de-DE).') }}</span>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(browser_profile_form.custom_headers) }}
                        <span class="pure-form-message-inline">{{ _('Extra HTTP headers for all requests using this profile (one per line, Key: Value). Applied before per-watch headers.') }}</span>
                    </div>
                    <div class="pure-control-group">
                        <button type="submit" class="pure-button pure-button-primary" id="profile-submit-btn">{{ _('Save profile') }}</button>
                        {% if editing_machine_name %}
                        <a href="{{ url_for('settings.settings_browsers.index') }}" class="pure-button button-cancel">{{ _('Cancel') }}</a>
                        {% endif %}
                        <a href="{{ url_for('settings.settings_page') }}" class="pure-button button-cancel">{{ _('Back to Settings') }}</a>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

<script>
function setDefaultProfile(machineName) {
    document.getElementById('default-machine-name').value = machineName;
    document.getElementById('set-default-form').submit();
}

const fetcherSupportsBrowser = {{ fetcher_supports_screenshots | tojson }};
const fetcherRequiresConnectionUrl = {{ fetcher_requires_connection_url | tojson }};

function updateBrowserFieldVisibility() {
    const fetchBackend = document.getElementById('profile-fetch-backend').value;
    const isBrowser = !!fetcherSupportsBrowser[fetchBackend];
    const isCdp = !!fetcherRequiresConnectionUrl[fetchBackend];
    document.querySelectorAll('.browser-only-field').forEach(function(el) {
        el.style.display = isBrowser ? '' : 'none';
    });
    document.querySelectorAll('.cdp-only-field').forEach(function(el) {
        el.style.display = isCdp ? '' : 'none';
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const sel = document.getElementById('profile-fetch-backend');
    if (sel) {
        sel.addEventListener('change', updateBrowserFieldVisibility);
        updateBrowserFieldVisibility();
    }
});

{% if editing_machine_name %}
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('browser-profile-form').scrollIntoView({behavior: 'smooth'});
});
{% endif %}
</script>
{% endblock %}