{% extends 'swimmonitor/base.html.twig' %}

{% block title %}To-Do{% endblock %}

{% block breadcrumb %}<li>Administration</li><li>To-Do</li>{% endblock %}

{% block page_head %}
    <div>
        <h1>To-Do</h1>
        <p class="sm-lead">Interne Aufgaben rund um den SwimMonitor.</p>
    </div>
    <dl class="sm-summary">
        <div><dt>Offen</dt><dd id="todoOpenCount">{{ openCount }}</dd></div>
        <div><dt>Gesamt</dt><dd id="todoTotalCount">{{ todos|length }}</dd></div>
    </dl>
{% endblock %}

{% macro chip(tag) %}<span class="sm-chip" data-sm-color="{{ tag.colorHex }}">{{ tag.name }}</span>{% endmacro %}

{% block content %}
    <div class="sm-grid-aside" data-sm-todo data-url-base="{{ path('admin_todo_index') }}">
        <section class="sm-panel">
            <form id="todoAddForm" class="sm-panel-body sm-todo-add">
                <div class="input-group">
                    <input type="text" class="form-control" id="todoTitle" name="title" placeholder="Neue Aufgabe …" maxlength="500" required aria-label="Neue Aufgabe">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-plus me-1"></i>Hinzufügen</button>
                </div>
                <div class="sm-chip-row" id="todoAddTagRow">
                    {% for tag in tags %}
                        <label class="sm-chip sm-chip--check" data-sm-color="{{ tag.colorHex }}">
                            <input type="checkbox" name="tag_ids[]" value="{{ tag.id }}">{{ tag.name }}
                        </label>
                    {% endfor %}
                </div>
            </form>

            <div class="sm-toolbar sm-toolbar--panel">
                <input class="sm-search" type="search" placeholder="Aufgaben durchsuchen …" aria-label="Aufgaben durchsuchen" data-sm-search="#todoList">
                <div class="sm-segment" data-sm-filter="#todoList" role="group" aria-label="Status">
                    <button type="button" class="active" data-sm-filter-value="all">Alle</button>
                    <button type="button" data-sm-filter-value="open">Offen</button>
                    <button type="button" data-sm-filter-value="done">Erledigt</button>
                </div>
            </div>

            <ul class="sm-todo" id="todoList">
                {% for todo in todos %}
                    <li class="{{ todo.done ? 'is-done' }}" data-sm-item data-sm-tags="{{ todo.done ? 'done' : 'open' }}"
                        data-id="{{ todo.id }}" data-tag-ids="{{ todo.tags|map(t => t.id)|join(',') }}">
                        <input type="checkbox" class="form-check-input" data-todo-action="toggle" {{ todo.done ? 'checked' }} aria-label="Erledigt">
                        <div>
                            <div class="sm-todo-title">{{ todo.title }}</div>
                            <div class="sm-todo-meta">
                                <span class="sm-chip-row" data-todo-badges>{% for tag in todo.tags %}{{ _self.chip(tag) }}{% endfor %}</span>
                                <time>{{ todo.createdAt|date('d.m.Y H:i') }}</time>
                            </div>
                            <div class="sm-todo-tagedit" data-todo-tagedit hidden></div>
                        </div>
                        <div class="sm-todo-actions">
                            <button type="button" class="btn btn-sm btn-secondary" data-todo-action="tags" aria-label="Tags bearbeiten"><i class="fas fa-tags"></i></button>
                            <button type="button" class="btn btn-sm btn-outline-danger" data-todo-action="delete" aria-label="Löschen"><i class="fas fa-trash-alt"></i></button>
                        </div>
                    </li>
                {% endfor %}
                <li class="sm-todo-empty" id="todoEmpty" {{ todos is empty ? '' : 'hidden' }}><div class="sm-empty"><strong>Keine Aufgaben</strong>Oben eine neue Aufgabe eintragen.</div></li>
                <li class="sm-todo-empty" data-sm-empty hidden><div class="sm-empty"><strong>Keine Treffer</strong>Suchbegriff oder Filter ändern.</div></li>
            </ul>
        </section>

        <aside class="sm-panel">
            <div class="sm-panel-head"><h2>Tags</h2><span class="sm-panel-meta">für alle Aufgaben</span></div>
            <form id="tagAddForm" class="sm-panel-body sm-tag-add">
                <input type="text" class="form-control form-control-sm" id="tagName" name="name" placeholder="Neuer Tag" maxlength="80" aria-label="Name des neuen Tags" required>
                <input type="color" class="form-control form-control-color form-control-sm" id="tagColor" name="colorHex" value="#3498db" aria-label="Farbe">
                <button type="submit" class="btn btn-sm btn-primary">Hinzufügen</button>
            </form>
            <ul class="sm-tag-manage" id="tagList">
                {% for tag in tags %}
                    <li data-id="{{ tag.id }}" data-name="{{ tag.name }}" data-color="{{ tag.colorHex }}">
                        {{ _self.chip(tag) }}
                        <input type="text" class="form-control form-control-sm" data-tag-field="name" value="{{ tag.name }}" maxlength="80" aria-label="Name" hidden>
                        <input type="color" class="form-control form-control-color form-control-sm" data-tag-field="color" value="{{ tag.colorHex }}" aria-label="Farbe" hidden>
                        <span class="sm-tag-manage-actions">
                            <button type="button" class="btn btn-sm btn-secondary" data-tag-action="edit" aria-label="Bearbeiten"><i class="fas fa-pen"></i></button>
                            <button type="button" class="btn btn-sm btn-outline-danger" data-tag-action="delete" aria-label="Löschen"><i class="fas fa-trash-alt"></i></button>
                        </span>
                    </li>
                {% else %}
                    <li class="sm-tag-manage-empty" id="tagEmpty">Noch keine Tags.</li>
                {% endfor %}
            </ul>
        </aside>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/pages/admin-todo.js') }}?v={{ sm_v }}" defer></script>
{% endblock %}