{% extends "utilities/_base.html" %}
{% from "components/distance_input.html" import distance_input %}
{% from "components/page_header.html" import page_header %}
{% from "components/collapsible_panel.html" import collapsible_panel %}
{% from "components/modal.html" import render_modal with context %}
{% from "components/switch.html" import switch %}
{% from "macros/automation_forms.html" import render_edit_automation_form with context %}

{% macro render_configure_form() %}
    {% for field in config_fields %}
        <div class="form-group">
            {% if field.type in ('float', 'int') %}
                <label for="config-{{ field.key }}">{{ field.label }}</label>
                <input type="number" id="config-{{ field.key }}" name="{{ field.key }}" {{ "required" if field.required }}
                       {% if field.min is not none %}min="{{ field.min }}"{% endif %}
                       {% if field.max is not none %}max="{{ field.max }}"{% endif %}
                       step="{{ field.step if field.step is not none else (1 if field.type == 'int' else 'any') }}"
                       value="{{ field.value }}">
            {% endif %}
            {% if field.type == 'string' %}
                <label for="config-{{ field.key }}">{{ field.label }}</label>
                <input type="text" id="config-{{ field.key }}" name="{{ field.key }}" {{ "required" if field.required }} value="{{ field.value }}">
            {% endif %}
            {% if field.type == 'select' %}
                <label for="config-{{ field.key }}">{{ field.label }}</label>
                <select id="config-{{ field.key }}" name="{{ field.key }}" class="searchable-select" data-search-disabled {{ "required" if field.required }}>
                    {% for option in field.options %}
                        <option value="{{ option.value }}" {{ "selected" if option.value == field.value else "" }}>
                            {{ option.label }}
                        </option>
                    {% endfor %}
                </select>
            {% endif %}
            {% if field.type == 'distance' %}
                <label for="config-{{ field.key }}">{{ field.label }}</label>
                {{ distance_input(
                    'config-' ~ field.key,
                    field.key,
                    field.value,
                    field.unit_key,
                    field.unit,
                    field.units,
                    min=field.min,
                    max=field.max,
                    step=field.step,
                    required=field.required
                ) }}
            {% endif %}
            {% if field.type == 'bool' %}
                <label class="checkbox-label" for="config-{{ field.key }}">
                    <input type="checkbox" id="config-{{ field.key }}" name="{{ field.key }}" {{ "checked" if field.value else "" }}>
                    {{ field.label }}
                </label>
            {% endif %}
            {% if field.help %}<p class="hint-text">{{ field.help }}</p>{% endif %}
        </div>
    {% endfor %}
{% endmacro %}

{% block title %}{{ _("Automations - Yaffo") }}{% endblock %}

{% block utility_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='components/cron_builder.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='components/collapsible_panel.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='components/switch.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='utilities/automations.css') }}">
{% endblock %}

{% block utility_content %}
{% if not selected %}
<div class="empty-state">
    <h2>{{ _("No automation selected") }}</h2>
    <p>{{ _("Pick one from the sidebar, or create one with “New automation”.") }}</p>
</div>
{% else %}
{% set header_actions %}
<div class="automation-actions">
    {{ switch(selected.display_name, selected.enabled,
              hx_post=url_for('automations_toggle_enabled', slug=selected.slug), hx_swap='none') }}
    <button type="button" class="btn-secondary js-run-files" data-mode="any">{{ _("Run…") }}</button>
    {% if not selected.is_system %}
        <a href="{{ url_for('automations_edit', slug=selected.slug) }}"
           class="btn-secondary" data-icon="edit">{{ _("Edit") }}</a>
    {% endif %}
    {% if not selected.is_system %}
        <button type="button" id="edit-automation-button" class="btn-secondary">{{ _("Edit details") }}
        </button>
        <button type="button" id="delete-automation-button" class="btn-danger"
                data-icon="delete">{{ _("Delete") }}
        </button>
    {% endif %}
</div>
{% endset %}
{% call page_header(selected.display_name, actions=header_actions) %}
    {% if selected.is_system %}
        {{ selected.display_description or _("A built-in automation that ships with Yaffo. System automations cannot be edited or deleted.") }}
    {% else %}
        {{ selected.display_description or _("No description yet — use “Edit details” to add one.") }}
    {% endif %}
{% endcall %}

<div class="automation-detail">
    {% include "utilities/automations_trigger_panel.html" %}
    {% if config_fields %}
    {% call collapsible_panel('automation-configure-panel', _('Configuration')) %}
        <form class="automation-configure-form" method="POST"
              action="{{ url_for('automations_update_config', slug=selected.slug) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            {{ render_configure_form() }}
            <button type="submit" class="btn-primary">{{ _("Save") }}</button>
        </form>
    {% endcall %}
    {% endif %}
    {% include "utilities/automations_runs.html" %}
</div>

{% if not selected.is_system %}
    <form id="delete-automation-form" method="POST"
          action="{{ url_for('automations_delete', slug=selected.slug) }}" hidden>
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    </form>
    {{ render_modal('editAutomationModal', _('Edit automation'),
                        url_for('automations_update_details', slug=selected.slug),
                        render_edit_automation_form, _('Save')) }}
{% endif %}
{% endif %}
{% endblock %}

{% block scripts %}
    {% if selected %}
        <script src="{{ url_for('static', filename='components/cron_builder.js') }}"></script>
        <script src="{{ url_for('static', filename='utilities/automations.js') }}"></script>
        <script>
            document.addEventListener('yaffo:app-init-complete', (event) => {
                const app = event.detail.app;
                app.automations.initAutomationDelete({{ selected.display_name | tojson }}, app.i18n);
                app.automations.initAutomationRunNow(
                    {{ url_for('automations_run_now', slug=selected.slug) | tojson }},
                    window.APP_CONFIG,
                    {{ default_media_dir | tojson }},
                    app.i18n
                );
                const cronBuilder = app.COMPONENTS.initCronBuilder({i18n: app.i18n, document});
                app.automations.initTriggerEditor(app.i18n, cronBuilder);
                {% if not selected.is_system %}
                app.automations.initAutomationDetails();
                {% endif %}
            });
        </script>
    {% endif %}
{% endblock %}