{#
SPDX-FileCopyrightText: 2026 Martin Kirchgessner

SPDX-License-Identifier: AGPL-3.0-or-later
#}

{% from 'autodj/macros.jinja' import filtertemplate %}
{% extends 'layout.jinja' %}
{% set title = "Edit auto-DJ slot" if slot else "Create auto-DJ slot" %}
{% block title %}{{ title }}{% endblock title %}

{% block content %}
<section class="content">
<div class="container">
<h1 aria-hidden="true" id="slot_title">
    {{ title }}
</h1>

<form
    aria-labelledby="slot_title"
    x-data
    x-on:submit.prevent="" {# avoid any default submit (eg. when clicking on a button) #}
    >
    <div class="field is-horizontal">
        <div class="field-label">
            <label for="title" class="label">Title</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input type="text" name="title" id="title" class="input" value="{{ slot.title if slot else '' }}" required>
                </div>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label">
            <label for="color" class="label">Color</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                    <input type="color" name="color" id="color" class="input" value="{{ color }}" required>
                </div>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label">
            <label for="day_of_week" class="label">Day of week</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control select">
                    <select id="day_of_week" name="day_of_week" required>
                        {% if not slot %}
                            <option value="">Choose...</option>
                            <option value="*">Everyday</option>
                        {% endif %}
                        {% for day in day_names %}
                            <option value="{{ day.value }}" {{ 'selected' if slot and slot.day_of_week == day.value else '' }}>
                                {{ day.display }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label">
            <label for="max_duration" class="label">Time</label>
        </div>
        <div class="field-body">
            <div class="field has-addons">
                <div class="control">
                    <input type="number" class="input" name="hour" placeholder="hour" value="{{
                        (slot.minute // 60) if slot else ''
                    }}">
                </div>
                <div class="control" aria-hidden="true">
                    <a class="button is-static">
                        :
                    </a>
                </div>
                <div class="control">
                    <input type="number" class="input" name="minute" placeholder="minutes" value="{{
                        (slot.minute % 60) if slot else ''
                    }}">
                </div>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label">
            <label class="label">
                Filters
            </label>
        </div>
        <div class="field-body">
            <p>
                Music picked during this time slot will be filtered with the following
                <a href="https://beets.readthedocs.io/en/stable/reference/query.html" target="_blank">
                Beets queries</a>, if any.
                If a few filters are provided, they are picked randomly according to their
                weight.
            </p>
        </div>
    </div>

    <template id="filtertemplate">
        {{ filtertemplate(None) }}
    </template>

    <div id="filterslist" class="field">
        {% if slot and slot.constraints and slot.constraints['filters'] %}
            {% for f in slot.constraints['filters'] %}
                {{ filtertemplate(f) }}
            {% endfor %}
        {% endif %}
    </div>

    <div class="field is-horizontal">
        <div class="field-label"></div>
        <div class="field-body">
            <div class="control">
                <button
                    class="button is-primary"
                    x-on:click="addFilter()"
                    aria-labelledby="add_filter_label"
                    >
                    <span id="add_filter_label">
                        Add a filter
                    </span>
                </button>
            </div>
        </div>
    </div>

    <div class="field is-horizontal">
        <div class="field-label"></div>
        <div class="field-body">
            <div class="field is-grouped">
                <div class="control">
                    <button
                        type="submit" class="button is-primary"
                        {% if slot %}
                            hx-put="{{ url_for('autodj.edit', slot_id=slot.id)}}"
                        {% else %}
                            hx-post="{{ url_for('autodj.add')}}"
                        {% endif %}
                        aria-label="Save"
                    >
                        Save
                    </button>
                </div>
                <div class="control">
                    <a
                        class="button is-info"
                        href="{{ url_for('autodj.index') }}"
                        aria-label="Cancel"
                        >
                        Cancel
                    </a>
                </div>

                {% if slot and slot.minute > 0 %}
                <div class="control">
                    <button
                        class="button is-danger"
                        hx-delete="{{ url_for('autodj.delete', slot_id=slot.id) }}"
                        hx-on::confirm="confirmWithMessage(`Really delete {{ slot.title }}?`)"
                        aria-label="Delete"
                    >
                        Delete
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</form>

<aside id="test-results" aria-labelledby="test-results-header"></aside>

</div>
</section>
{% endblock %}


{% block scripts %}
<script>
    function addFilter() {
        const filterslist = document.querySelector("#filterslist");
        const template = document.querySelector("#filtertemplate");
        let clone = template.content.cloneNode(true);
        htmx.process(clone);
        filterslist.appendChild(clone);
    }

    function removeFilter(event) {
        const line = event.target.closest("div.is-horizontal");
        line.remove();
    }

    function closeTest() {
        const container = document.querySelector("#test-results");
        container.innerHTML = '';
    }

</script>
{% endblock scripts %}
