{% import "desc.html" as desc %}
<div class="modal-box">
    <h2 class="text-lg font-bold text-neutral-content-200">Task Details</h2>
    <div class="join mb-3">
        <button class="btn btn-xs btn-warning join-item"
                id="tag-btn-back-details"
                hx-get="tasks"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-trigger="click,keyup[key=='Escape'] from:#task-details-inp">
            <kbd class="shortcut_key">Esc</kbd>
        </button>
        <button
                class="btn btn-success btn-xs join-item"
                id="btn-mark-as-done"
                hx-post="tasks"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                {% if task.status !="completed" %}
                    hx-vals='{"status": "completed", "uuid":"{{ task.uuid }}", "action": "StatusUpdate"}'
                {% else %}
                    hx-vals='{"status": "pending", "uuid":"{{ task.uuid }}", "query": "status:completed", "action": "StatusUpdate" }'
                {% endif %}
                hx-trigger="click,keyup[key=='d'] from:#task-details-inp"
        ><span><span class="shortcut_key">d</span>one</span></button>
        <button
                class="btn btn-accent btn-xs join-item"
                id="btn-denotate-task"
                hx-post="tasks"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-vals='{"uuid":"{{ task.uuid }}", "action": "DenotateTask"}'
                hx-trigger="click,keyup[key=='n'] from:#task-details-inp"
        >
            <span>de<span class="shortcut_key">n</span>otate</span>
        </button>
        <button
                class="btn btn-info btn-xs join-item"
                id="btn-timer-toggle"
                hx-post="tasks"
                hx-target="#list-of-tasks"
                hx-include="[id='filtering']"
                hx-vals='{"uuid":"{{ task.uuid }}", "action": "ToggleTimer"}'
                hx-trigger="click,keyup[key=='s'] from:#task-details-inp">
            <span>
            {% if task.start %}
                <span class="shortcut_key">s</span>top
            {% else %}
            <span class="shortcut_key">s</span>tart
            {% endif %}
            </span>
        </button>
        <span class="join-item">
            <label for="task-details-inp" class="hidden"></label>
            <input type="text" id="task-details-inp"
                   class="input input-neutral input-xs join-item"
                   placeholder="Cmd Bar, Ctrl+Shift+K"
                   autofocus /></span>
    </div>
    <table class="table table-xs table-zebra">
        <tbody>
        <tr>
            <th>Description</th>
            <td class="text-wrap w-2/3">
                {{ desc::desc(task=task) }}
            </td>
        </tr>
        <tr>
            <th class="w-1/6">
                <label for="task-edit-inp">Modify</label>
            </th>
            <td>
                <input type="text" id="task-edit-inp"
                       class="input-neutral input input-xs"
                       placeholder="Edit task with command"
                       hx-trigger="keyup[key=='Enter'] from:#task-edit-inp"
                       hx-post="tasks"
                       hx-target="#list-of-tasks"
                       hx-include="[this],[id='filtering']"
                       name="task_entry"
                       hx-vals='{"uuid":"{{ task.uuid }}", "action": "ModifyTask"}'
                />
            </td>
        </tr>
        <tr>
            <th>
                <label for="task-annot-inp">Annotate</label>
            </th>
            <td>
                <input type="text" id="task-annot-inp"
                       class="input-neutral input input-xs"
                       placeholder="Annotate task"
                       hx-trigger="keyup[key=='Enter'] from:#task-annot-inp"
                       hx-post="tasks"
                       hx-target="#list-of-tasks"
                       hx-include="[this],[id='filtering']"
                       name="task_entry"
                       hx-vals='{"uuid":"{{ task.uuid }}", "action": "AnnotateTask"}'
                />
            </td>
        </tr>
        <tr>
            <th>Age</th>
            <td>{% if task.entry %}{{ date_proper(date=task.entry) }}{% endif %}</td>
        </tr>
        <tr>
            <th>Depends on</th>
            <td>
                {% if task.depends %}
                {% for uuid in task.depends %}
                {%if tasks_db[uuid] %}{{ tasks_db[uuid].id }}{% endif %}
                {% endfor %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <th>Project</th>
            <td>
                {% if task.project %}
                <div class="breadcrumbs text-sm">
                    <ul>
                    {% for p in task.project | split(pat=".") %}
                    <li class="">
                        {{ p }}
                    </li>
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </td>
        </tr>
        <tr>
            <th>Tags</th>
            <td>
                <div>
                    {% if task.tags %}
                        {% for p in task.tags %}
                            <span class="badge-sm badge badge-accent">
                                {{ p }}
                            </span>
                        {% endfor %}
                    {% endif %}
                    {% if task.priority %}
                    <span class="badge badge-sm badge-secondary">{{ task.priority }}</span>
                    {% endif %}
                </div>
            </td>
        </tr>
        <tr>
            <th>Urgency</th>
            <td>{{ task.urgency }}</td>
        </tr>
        <tr>
            {% if task.start %}
            <th>Start</th>
            <td>
                {{ date_proper(date=task.start) }}
            </td>
        </tr>
        <tr>
            {% endif %}
            {% if task.due and task.status != 'completed' %}
            <th>Due</th>
            <td>
                {{ date_proper(date=task.due, in_future=true) }}
            </td>
            {% endif %}
        </tr>
        <tr>
            {% if task.scheduled %}
            <th>Schd</th>
            <td>
                {{ date_proper(date=task.scheduled, in_future=true) }}
            </td>
            {% endif%}
        </tr>
        <tr>
            {% if task.end %}
            <th>End</th>
            <td>
                {{ date_proper(date=task.end) }}
            </td>
            {% endif %}
        </tr>
        <tr>
            {% if task.recur %}
            <th>RECUR</th>
            <td>
                {{task.recur}}
            </td>
            {% endif %}
        </tr>
        </tbody>
    </table>
    <script>
        try {
            document.getElementById('task-inp').value = '';
        } catch (e) {

        }
        document.getElementById('all-dialog-boxes').showModal()
    </script>
</div>