{# Trigger list + add controls for one automation. Included by automations.html on
   first render and re-rendered in place by the automations_triggers HTMX endpoint
   (single endpoint, action via hx-vals). Expects: triggers, slug, events, error.

   The schedule add UI is the cron editor component (components/cron_builder.js):
   the <div data-cron-builder> mount renders itself and keeps a hidden `cron` input
   the server validates. Existing schedule rows carry data-cron and the component
   fills the friendly text (the raw cron shown here is the no-JS fallback). Editing
   a schedule = delete + re-add. #}
<div id="automation-triggers">
    <form class="automation-trigger-form">
        {% if error %}<p class="automation-trigger-error">{{ error }}</p>{% endif %}

        {% if triggers %}
            <ul class="automation-triggers">
                {% for trigger in triggers %}
                    <li class="automation-trigger-row{{ ' is-off' if not trigger.enabled }}">
                        {% if trigger.trigger_type == 'schedule' %}
                            <span class="automation-trigger-kind">{{ _("Schedule") }}</span>
                            <span class="automation-trigger-desc" data-cron="{{ trigger.cron }}">{{ trigger.cron }}</span>
                            {% set scope = trigger.config or {} %}
                            <small class="automation-trigger-scope">
                                {% if scope.get('scope_type') == 'media_dirs' or (not scope.get('scope_type') and scope.get('media_dir_ids')) %}
                                    {% trans count=scope.get('media_dir_ids', [])|length %}{{ count }} media directory{% pluralize %}{{ count }} media directories{% endtrans %}
                                {% elif scope.get('scope_type') == 'paths' or (not scope.get('scope_type') and scope.get('folder_paths')) %}
                                    {% trans count=scope.get('folder_paths', [])|length %}{{ count }} path{% pluralize %}{{ count }} paths{% endtrans %}
                                {% else %}{{ _("Everything") }}{% endif %}
                            </small>
                        {% else %}
                            <span class="automation-trigger-kind">{{ _("Event") }}</span>
                            <code class="automation-trigger-event">{{ events.get(trigger.event_type, trigger.event_type) }}</code>
                        {% endif %}
                        <span class="automation-trigger-spacer"></span>
                        {% if trigger.trigger_type == 'schedule' %}
                            <button type="button" class="btn-secondary js-edit-schedule"
                                    data-cron-value="{{ trigger.cron }}" data-trigger-id="{{ trigger.id }}"
                                    data-scope='{{ (trigger.config or {})|tojson|forceescape }}'>{{ _("Edit") }}</button>
                        {% endif %}
                        <button type="button" class="btn-secondary"
                                hx-post="{{ url_for('automations_triggers', slug=slug) }}"
                                hx-vals='{"action": "toggle", "trigger_id": {{ trigger.id }}}'
                                hx-target="#automation-triggers">{{ _("Disable") if trigger.enabled else _("Enable") }}</button>
                        <button type="button" class="btn-danger"
                                hx-post="{{ url_for('automations_triggers', slug=slug) }}"
                                hx-vals='{"action": "remove", "trigger_id": {{ trigger.id }}}'
                                hx-target="#automation-triggers">{{ _("Delete") }}</button>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="no-data">{{ _("No triggers — this automation won't run until one is added.") }}</p>
        {% endif %}

        {# Two entry points; each reveals its own panel (one at a time). automations.js
           (initTriggerEditor) toggles .adding-schedule / .adding-event on this
           container and drives the cron builder; a row's Edit reuses the schedule
           panel pre-populated. #}
        <div class="automation-trigger-add" data-default-path="{{ media_dirs[0].path if media_dirs else '' }}"
             data-remove-label="{{ _('Remove') }}" data-selected-folder-label="{{ _('Selected folder') }}">
            <input type="hidden" name="edit_trigger_id" value="">

            <div class="automation-add-actions">
                <button type="button" class="btn-secondary js-add-schedule">{{ _("Add a schedule") }}</button>
                <button type="button" class="btn-secondary js-add-event">{{ _("Add an event") }}</button>
            </div>

            <div class="schedule-editor">
                <h4 class="automation-add-title schedule-editor-title">{{ _("Add a schedule") }}</h4>
                <section class="automation-trigger-section" aria-label="{{ _('Schedule') }}">
                    <h5 class="automation-section-title">{{ _("Schedule") }}</h5>
                    <div data-cron-builder data-cron-name="cron"></div>
                </section>
                <section class="automation-trigger-section schedule-scope-section" aria-labelledby="schedule-scope-heading">
                    <h5 id="schedule-scope-heading" class="automation-section-title">{{ _("Scope") }}</h5>
                    <div class="form-row schedule-scope-choice">
                        <label class="form-row-label" for="schedule-scope-type">{{ _("Run on") }}</label>
                        <select id="schedule-scope-type" name="scope_type" class="form-control">
                            <option value="everything">{{ _("Everything") }}</option>
                            <option value="media_dirs">{{ _("Media directories") }}</option>
                            <option value="paths">{{ _("Paths") }}</option>
                        </select>
                    </div>
                    <div class="form-row schedule-scope-everything">
                        <span class="form-row-label"></span>
                        <p class="hint-text">{{ _("All indexed media in every configured media directory.") }}</p>
                    </div>
                    <div class="form-row schedule-scope-media-dirs" hidden>
                        <span class="form-row-label">{{ _("Include") }}</span>
                        <div class="schedule-scope-content">
                            <p class="hint-text">{{ _("Choose the media directories to include.") }}</p>
                            <div class="schedule-scope-directory-list">
                                {% for media_dir in media_dirs %}
                                    <label class="checkbox-label schedule-scope-directory">
                                        <input type="checkbox" name="media_dir_ids" value="{{ media_dir.id }}">
                                        <span>{{ media_dir.path }}</span>
                                    </label>
                                {% else %}
                                    <p class="hint-text">{{ _("No media directories are configured.") }}</p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="form-row schedule-scope-paths" hidden>
                        <span class="form-row-label">{{ _("Folders") }}</span>
                        <div class="schedule-scope-content">
                            <p class="hint-text">{{ _("Choose one or more folders inside your media directories.") }}</p>
                            <div class="schedule-scope-path-list"></div>
                            <button type="button" class="btn-secondary js-add-scope-path" data-icon="folder">
                                {{ _("Choose folder") }}
                            </button>
                        </div>
                    </div>
                </section>
                <div class="automation-trigger-add-row">
                    <button type="button" class="btn-primary js-save-schedule"
                            hx-post="{{ url_for('automations_triggers', slug=slug) }}"
                            hx-vals='{"action": "save_schedule"}'
                            hx-target="#automation-triggers">{{ _("Save schedule") }}</button>
                    <button type="button" class="btn-secondary js-cancel">{{ _("Cancel") }}</button>
                    <span class="schedule-editor-error" hidden>{{ _("Not a valid cron expression") }}</span>
                </div>
            </div>

            <div class="event-editor">
                <h4 class="automation-add-title">{{ _("Add an event trigger") }}</h4>
                <div class="form-row">
                    <label class="form-row-label" for="new-event-type">{{ _("Event") }}</label>
                    <select id="new-event-type" name="new_event_type" class="form-control" aria-label="{{ _('Event type') }}">
                        {% for value, label in events.items() %}
                            <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="automation-trigger-add-row">
                    <button type="button" class="btn-primary"
                            hx-post="{{ url_for('automations_triggers', slug=slug) }}"
                            hx-vals='{"action": "add_event"}'
                            hx-target="#automation-triggers">{{ _("Add event") }}</button>
                    <button type="button" class="btn-secondary js-cancel">{{ _("Cancel") }}</button>
                </div>
            </div>
        </div>
    </form>
</div>