{% extends "utilities/_base.html" %}
{% from "components/distance_input.html" import distance_input %}
{% from "components/page_header.html" import page_header %}
{% from "components/modal.html" import render_modal %}

{% macro render_edit_automation_form() %}
    <div class="form-group">
        <label for="edit-automation-name">{{ _("Name") }}</label>
        <input type="text" id="edit-automation-name" name="name" required value="{{ selected.name }}">
    </div>
    <div class="form-group">
        <label for="edit-automation-description">{{ _("Description") }}</label>
        <textarea id="edit-automation-description" name="description" rows="3"
                  placeholder="{{ _('What does this automation do?') }}">{{ selected.description or '' }}</textarea>
    </div>
{% endmacro %}

{% 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 == '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='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">
    <button type="button" class="{{ 'btn-secondary' if selected.enabled else 'btn-primary' }}"
            hx-post="{{ url_for('automations_toggle_enabled', slug=selected.slug) }}"
            hx-swap="none">{{ _("Disable") if selected.enabled else _("Enable") }}
    </button>
    {% if scoped_run %}
        <button type="button" class="btn-secondary js-run-files" data-mode="any">{{ _("Run…") }}</button>
    {% else %}
        <button type="button" id="run-automation-button" class="btn-secondary">{{ _("Run now") }}</button>
    {% endif %}
    {% if not selected.is_system %}
        <a href="{{ url_for('automations_edit', slug=selected.slug) }}"
           class="btn-primary" data-icon="edit">{{ _("Edit") }}</a>
    {% endif %}
    <a href="{{ url_for('automations_edit_triggers', slug=selected.slug) }}"
       class="btn-secondary" data-icon="edit">{{ _("Edit triggers") }}</a>
    {% if config_fields %}
        <button type="button" id="configure-automation-button" class="btn-secondary">{{ _("Configure") }}
        </button>
    {% 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_runs.html" %}
</div>

{% if not selected.is_system %}
    <form id="delete-automation-form" method="POST"
          action="{{ url_for('automations_delete', slug=selected.slug) }}" hidden></form>
    {{ render_modal('editAutomationModal', _('Edit automation'),
                        url_for('automations_update_details', slug=selected.slug),
                        render_edit_automation_form, _('Save')) }}
{% endif %}
{% if config_fields %}
    {{ render_modal('configureAutomationModal', _('Configure automation'),
                        url_for('automations_update_config', slug=selected.slug),
                        render_configure_form, _('Save')) }}
{% endif %}
{% endif %}
{% endblock %}

{% block scripts %}
    {% if selected %}
        <script src="{{ url_for('static', filename='utilities/automations.js') }}"></script>
        <script>
            window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
                window.PHOTO_ORGANIZER.initAutomationDelete({{ selected.display_name | tojson }}, i18n);
                window.PHOTO_ORGANIZER.initAutomationRunNow(
                    {{ url_for('automations_run_now', slug=selected.slug) | tojson }},
                    window.APP_CONFIG,
                    {{ (selected.triggers | length > 0) | tojson }},
                    {{ default_media_dir | tojson }},
                    i18n
                );
                {% if config_fields %}window.PHOTO_ORGANIZER.initAutomationConfigure();{% endif %}
                {% if not selected.is_system %}
                window.PHOTO_ORGANIZER.initAutomationDetails();
                {% endif %}
            });
        </script>
    {% endif %}
{% endblock %}