{% extends "base.html" %}

{% block title %}Central — Edit {{ adapter.display_name }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ==" crossorigin="anonymous">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous"></script>
{% endblock %}

{% block content %}
<h1>{{ adapter.display_name }}</h1>
<p class="secondary">{{ adapter.description }}</p>

{% if adapter.paused_at %}
<article aria-label="Adapter Paused" style="background-color: var(--pico-mark-background-color); margin-bottom: 1rem;">
    <strong>⏸️ Paused</strong> since {{ adapter.paused_at }}
</article>
{% endif %}

{% if adapter.last_error %}
<article aria-label="Last Error" style="background-color: var(--pico-del-color); margin-bottom: 1rem;">
    <strong>Last Error:</strong> {{ adapter.last_error }}
</article>
{% endif %}

{% if api_key_missing %}
<article aria-label="API Key Required" style="background-color: var(--pico-mark-background-color); margin-bottom: 1rem;">
    <strong>⚠️ API Key Required:</strong> This adapter requires the <code>{{ requires_api_key_alias }}</code> API key to be configured before it can be enabled.
    <a href="/api-keys">Configure API Keys</a>
</article>
{% endif %}

<form method="post" action="/adapters/{{ adapter.name }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

    <fieldset>
        <legend>Core Settings</legend>

        <label>
            <input type="checkbox" name="enabled" {% if form_data %}{% if form_data.enabled %}checked{% endif %}{% elif adapter.enabled %}checked{% endif %}{% if api_key_missing %} disabled{% endif %}>
            Enabled{% if api_key_missing %} <small>(requires API key)</small>{% endif %}
        </label>

        <label for="cadence_s">Cadence (seconds)</label>
        <input type="number" id="cadence_s" name="cadence_s"
               value="{{ form_data.cadence_s if form_data else adapter.cadence_s }}"
               required>
        {% if errors and errors.cadence_s %}
        <small style="color: var(--pico-color-red-500);">{{ errors.cadence_s }}</small>
        {% endif %}
    </fieldset>

    {% if fields %}
    <fieldset>
        <legend>Adapter Settings</legend>

        {% for field in fields %}
            {% if field.widget == "region" %}
                {# Region is rendered in a separate fieldset below #}
            {% elif field.widget == "text" %}
                <label for="{{ field.name }}">{{ field.label }}</label>
                <input type="text" id="{{ field.name }}" name="{{ field.name }}"
                       value="{{ form_data[field.name] if form_data and field.name in form_data else field.current_value or '' }}"
                       {% if field.required %}required{% endif %}>
                {% if field.description %}
                <small>{{ field.description }}</small>
                {% endif %}
                {% if errors and errors[field.name] %}
                <small style="color: var(--pico-color-red-500);">{{ errors[field.name] }}</small>
                {% endif %}

            {% elif field.widget == "number" %}
                <label for="{{ field.name }}">{{ field.label }}</label>
                <input type="number" id="{{ field.name }}" name="{{ field.name }}"
                       value="{{ form_data[field.name] if form_data and field.name in form_data else field.current_value or '' }}"
                       {% if field.required %}required{% endif %}>
                {% if field.description %}
                <small>{{ field.description }}</small>
                {% endif %}
                {% if errors and errors[field.name] %}
                <small style="color: var(--pico-color-red-500);">{{ errors[field.name] }}</small>
                {% endif %}

            {% elif field.widget == "checkbox" %}
                <label>
                    <input type="checkbox" name="{{ field.name }}"
                           {% if form_data and field.name in form_data %}
                               {% if form_data[field.name] %}checked{% endif %}
                           {% elif field.current_value %}checked{% endif %}>
                    {{ field.label }}
                </label>
                {% if field.description %}
                <small>{{ field.description }}</small>
                {% endif %}
                {% if errors and errors[field.name] %}
                <small style="color: var(--pico-color-red-500);">{{ errors[field.name] }}</small>
                {% endif %}

            {% elif field.widget == "csv" %}
                <label for="{{ field.name }}">{{ field.label }}</label>
                <input type="text" id="{{ field.name }}" name="{{ field.name }}"
                       value="{{ form_data[field.name] if form_data and field.name in form_data else (field.current_value | join(',') if field.current_value else '') }}"
                       {% if field.required %}required{% endif %}>
                <small>Comma-separated values{% if field.description %} — {{ field.description }}{% endif %}</small>
                {% if errors and errors[field.name] %}
                <small style="color: var(--pico-color-red-500);">{{ errors[field.name] }}</small>
                {% endif %}

            {% elif field.widget == "select" %}
                <label for="{{ field.name }}">{{ field.label }}</label>
                <select id="{{ field.name }}" name="{{ field.name }}">
                    {% for opt in field.options %}
                    <option value="{{ opt }}"
                            {% if (form_data[field.name] if form_data and field.name in form_data else field.current_value) == opt %}selected{% endif %}>
                        {{ opt }}
                    </option>
                    {% endfor %}
                </select>
                {% if field.description %}
                <small>{{ field.description }}</small>
                {% endif %}
                {% if errors and errors[field.name] %}
                <small style="color: var(--pico-color-red-500);">{{ errors[field.name] }}</small>
                {% endif %}

            {% elif field.widget == "checkboxes" %}
                <label>{{ field.label }}</label>
                {% set current_values = form_data.getlist(field.name) if form_data and form_data.getlist else (field.current_value or []) %}
                {% for opt in field.options %}
                <label style="display: inline-block; margin-right: 1rem;">
                    <input type="checkbox" name="{{ field.name }}" value="{{ opt }}"
                           {% if opt in current_values %}checked{% endif %}>
                    {{ opt }}
                </label>
                {% endfor %}
                {% if field.description %}
                <small style="display: block;">{{ field.description }}</small>
                {% endif %}
                {% if errors and errors[field.name] %}
                <small style="color: var(--pico-color-red-500); display: block;">{{ errors[field.name] }}</small>
                {% endif %}

            {% elif field.widget == "api_key_select" %}
                <label for="{{ field.name }}">{{ field.label }}</label>
                <select id="{{ field.name }}" name="{{ field.name }}">
                    <option value="">(none)</option>
                    {% for key in api_keys %}
                    <option value="{{ key.alias }}"
                            {% if (form_data[field.name] if form_data and field.name in form_data else field.current_value) == key.alias %}selected{% endif %}>
                        {{ key.alias }}
                    </option>
                    {% endfor %}
                </select>
                {% if field.description %}
                <small>{{ field.description }}</small>
                {% endif %}
                {% if errors and errors[field.name] %}
                <small style="color: var(--pico-color-red-500);">{{ errors[field.name] }}</small>
                {% endif %}
            {% endif %}
        {% endfor %}
    </fieldset>
    {% endif %}

    {% set has_region = namespace(value=false) %}
    {% for field in fields %}
        {% if field.widget == "region" %}
            {% set has_region.value = true %}
        {% endif %}
    {% endfor %}

    {% if has_region.value %}
    <fieldset>
        <legend>Region</legend>
        {% include "_region_picker.html" %}
    </fieldset>
    {% endif %}

    <button type="submit">Save Changes</button>
    <a href="/adapters" role="button" class="outline">Cancel</a>
</form>
{% endblock %}