{% extends "base.html" %}
{% from "components/modal.html" import render_modal %}

{% block extra_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='utilities/_base.css') }}">
    {% block utility_styles %}{% endblock %}
{% endblock %}

{% macro render_new_automation_form() %}
    <div class="form-group">
        <label for="new-automation-name">{{ _("Name") }}</label>
        <input type="text" id="new-automation-name" name="name" required
               placeholder="{{ _('e.g. Tag beach photos, Weekly cleanup') }}">
        <p class="hint-text">{{ _("Starts empty — build it through a conversation, then publish.") }}</p>
    </div>
{% endmacro %}

{% macro automation_nav_list(automations) %}
    <ul class="panel-nav">
        {% for automation in automations %}
            <li>
                <a href="{{ url_for('automations_show', slug=automation.slug) }}"
                   class="{% if automation.slug == selected_slug %}active{% endif %}">
                    <span class="panel-nav-label">{{ automation.display_name }}</span>
                    {% if automation.enabled %}<span class="automation-nav-badge">{{ _("On") }}</span>{% endif %}
                </a>
            </li>
        {% endfor %}
    </ul>
{% endmacro %}

{% block content %}
    <div class="utilities-container">
        <div class="utilities-sidebars">
            <nav class="sidebar utilities-sidebar">
                <h2>{{ _("Utilities") }}</h2>
                <ul class="panel-nav">
                    <li>
                        <a href="{{ url_for('utilities_index_photos') }}"
                           class="{% if request.endpoint == 'utilities_index_photos' %}active{% endif %}">
                            {{ _("Index Photos") }}
                        </a>
                    </li>
                    <li>
                        <a href="{{ url_for('utilities_remove_duplicates') }}"
                           class="{% if request.endpoint in ['utilities_remove_duplicates', 'utilities_remove_duplicates_results'] %}active{% endif %}">
                            {{ _("Remove Duplicates") }}
                        </a>
                    </li>
                </ul>
            </nav>
            <nav class="sidebar utilities-sidebar">
                <h2>{{ _("Automations") }}</h2>
                <h3 class="automations-nav-heading">{{ _("System") }}</h3>
                {% if system_automations %}
                    {{ automation_nav_list(system_automations) }}
                {% else %}
                    <p class="no-data">{{ _("None") }}</p>
                {% endif %}

                <h3 class="automations-nav-heading">{{ _("Custom") }}</h3>
                {% if custom_automations %}
                    {{ automation_nav_list(custom_automations) }}
                {% else %}
                    <p class="no-data">{{ _("No custom automations yet") }}</p>
                {% endif %}

                <button type="button" id="new-automation-button" class="btn-secondary new-automation-button"
                        data-icon="add">{{ _("New automation") }}
                </button>
            </nav>
        </div>

        <div class="utilities-content">
            {% block utility_content %}{% endblock %}
        </div>
    </div>

    {# Shared across every utilities page so the sidebar's "New automation" works anywhere. #}
    {{ render_modal(
        'newAutomationModal',
        _('New Automation'),
        url_for('automations_create'),
        render_new_automation_form,
        _('Create'),
    ) }}
    <script src="{{ url_for('static', filename='utilities/_base.js') }}"></script>
{% endblock %}