{% import "desc.html" as desc %}
{% if has_toast %}
<div hx-swap-oob="beforeend:#toast">
    <div class="items-center justify-items-center gap-4 px-5 py-3 text-neutral-300 fixed h-18 top-0 left-0 w-full z-50 bg-cyan-700 shadow-xs shadow-black"
         hx-trigger="load delay:{{ toast_timeout }}s" hx-get="/msg_clr" id="flash_msg" hx-swap="outerHTML">
        <div class="flex flex-row">
            <span class="text-sm font-medium hover:opacity-75 flex-grow">{{ toast_msg }}</span>
            <span>
                <button class="rounded bg-white/20 p-1 hover:bg-white/10" hx-get="/msg_clr" hx-target="#toast"
                        hx-trigger="click,keyup[key=='Escape'] from:#cmd-inp"
                        autofocus
                        hx-swap="innerHTML">
                    <span class="shortcut_key">[Esc]</span>
                </button>
            </span>
        </div>
    </div>
</div>
{% endif %}
<div class="mb-auto h-max">
    <dialog id="all-dialog-boxes" class="modal"></dialog>
    <div id="task_form_div"></div>
    <div id="task_details"></div>
    <!-- Open the modal using ID.showModal() method -->
    {% set on_all = "all" %}
    {% set on_complete = "btn-success" %}
    {% set on_pending = "btn-warning" %}
    {% set on_waiting = "btn-accent" %}
    {% set mod_key = "" %}
    <div class="fixed top-0 left-0 h-[18] z-40 w-full pb-2 shadow-sm shadow-black bg-base-100">
        {% include 'left_action_bar.html' %}
            <!-- TAG LIST -->
        <div class="pl-2 flex justify-center join">
                {% for f in current_filter %}
                <button class="btn btn-xs join-item {% if f is starting_with('project:') %}btn-accent{% else %}btn-neutral {% endif %}"
                        hx-include="[id='filtering']"
                        hx-get="tasks?query={{ f | replace(from='+', to='%2B') }}"
                        hx-target="#list-of-tasks">
                    {{ remove_project_tag(task=f) }}
                </button>
                {% endfor %}
                <button class="btn btn-disabled btn-xs btn-neutral join-item"></button>
        </div>
        <input type="hidden" id="filtering" name="filter_value" value="{{ filter_value }}">
        <!-- // -->
    </div>

    <div class="relative overflow-x-auto shadow-md sm:rounded-b-lg overflow-y-auto mt-20 pt-0 pb-2 mb-5">

        {% if display_time_of_the_day == 1 %}
        <div class="justify-start items-center h-4" id="time_of_the_day">
            <div class="flex-1 w-full rounded-sm text-accent-content text-xs">
                <div class="[min-width:4px] mt-1 bg-accent shadow-inner shadow-accent rounded-sm fill-accent px-2 content-end">
                </div>
            </div>
        </div>
        {% endif %}

        <span hx-get="tasks/active" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></span>

        <div class="grid grid-cols-1">
            <div id="tags_map_drawer" class="pt-4 hidden mb-2">
                <div class="flex flex-wrap gap-2 p-4 bg-base-300">
                    <div class="join">
                        <button
                                id="tag-btn-back"
                                class="btn btn-warning btn-xs join-item"
                                hx-get="tasks"
                                hx-trigger="click,keyup[key=='Escape'] from:#task-inp"
                                hx-target="#list-of-tasks"
                                hx-include="[id='filtering']"
                        ><span><span class="shortcut_key">ESC</span></span></button>
                        <label for="tag-inp" class="hidden"></label>
                        <input type="text" id="tag-inp"
                               class="input input-xs input-accent join-item"
                               placeholder="Tag Bar"
                               hx-trigger="changes delay:2s"
                               hx-target="#list-of-tasks"
                               hx-include="[id='filtering']"
                               hx-swap="innerHTML"
                               autofocus
                               onkeyup="if (this.value.length >= 2) { document.getElementById(this.value).click() }"
                        />
                    </div>
                    {% for tag, shortcut in tags_map %}
                    {% if tag is keyword_tag %}
                    {% endif %}
                    {% if tag is user_tag %}
                    {% endif %}
                    <div class="mb-2">
                        <div class="flex gap-2">
                            <button id="{{shortcut}}"
                                    {% if tag is starting_with('+') %}
                                    class="btn btn-xs btn-accent-content shrink"
                                    hx-get="tasks?query={{ tag | replace(from='+', to='%2B') }}"
                                    {% elif tag is starting_with('@') %}
                                    class="btn btn-xs btn-info shrink"
                                    hx-get="tasks?query={{ tag | trim_start_matches(pat='@') }}"
                                    {% else %}
                                    class="btn btn-xs btn-neutral shrink"
                                    hx-get="tasks?query={% if tag is starting_with('project:') %}{{ tag }}{% else %}project:{{tag}}{% endif %}"
                                    {% endif %}
                                    hx-target="#list-of-tasks"
                                    hx-include="[id='filtering']"
                                    hx-swap="innerHTML"
                            >{{ shortcut }}</button>
                            <div class="text-xs pt-1">{{ tag | trim_start_matches(pat='@') | trim_start_matches(pat='project:') }}</div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div>
                <ul class="list bg-base-100 rounded-box shadow-md text-sm">
                    {% for task in tasks %}
                    <li class="list-row {% if task.start %} bg-green-700 text-green-200 {% endif %} p-2">
                        <div>
                            <input type="checkbox"
                                   class="checkbox checkbox-sm"
                                   name="checkbox-{{ task.uuid }}"
                                   id="{{ task_shortcuts[task.uuid] }}"
                                   hx-trigger="change"
                                   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"}'
                                   hx-swap="innerHTML"
                                   {% else %}
                                   checked="checked"
                                   hx-vals='{"status": "pending", "uuid":"{{ task.uuid }}", "query": "status:completed", "action": "StatusUpdate" }'
                                   hx-swap="innerHTML"
                                   {% endif %}>
                            <button class="btn btn-xs btn-primary hidden task-shortcut-tag">{{ task_shortcuts[task.uuid] }}</button>
                            <button
                                    id="{{ task_shortcuts[task.id] }}"
                                    class="btn btn-secondary static btn-xs is-a-tag min-w-12"
                                    hx-trigger="click"
                                    hx-get="task_details?task_id={{ task.uuid }}"
                                    hx-target="#all-dialog-boxes"
                            >
                                {{ task.id }} <span class="shortcut_key hidden task-shortcut-tag">{{ task_shortcuts[task.id] }}</span>
                            </button>
                        </div>
                        <div class="max-w-3xl">
                            {{ desc::desc(task=task) }}
                        </div>
                        <div class="join">
                            {% if task.project %}
                            {% for p in task.project | split(pat=".") %}
                            {% set ptag = ["project", p] | join(sep=":") %}
                            <button class="join-item btn btn-accent btn-xs is-a-tag"
                                    hx-include="[id='filtering']"
                                    hx-target="#list-of-tasks"
                                    hx-get="tasks?query=project:{{ project_name(full_name=task.project, index=loop.index) }}">
                                {{ p }}
                            </button>
                            {% endfor %}
                            {% endif %}
                            {% if task.priority %}
                            <button class="btn btn-xs {{ task.priority }} btn-neutral"
                                    hx-get="tasks?query=priority:{{ task.priority }}"
                                    hx-target="#list-of-tasks"
                                    hx-include="[id='filtering']"
                                    hx-swap="innerHTML"
                            >{{ task.priority }}
                            </button>
                            {% endif %}
                            {% if task.tags %}
                            {% for p in task.tags %}
                            <button class="btn btn-xs btn-neutral join-item is-a-tag"
                                    hx-get="tasks?query={{ p | replace(from='+', to='%2B') }}"
                                    hx-target="#list-of-tasks"
                                    hx-include="[id='filtering']"
                                    hx-swap="innerHTML">
                                {{ p }}
                            </button>
                            {% endfor %}
                            {% else %}
                            <button class="btn btn-disabled btn-xs btn-neutral join-item"></button>
                            {% endif %}
                        </div>
                        <div class="join">

                            {% if task.depends %}
                                {% for uuid in task.depends %}
                                {%if tasks_db[uuid] %}
                                <button class="btn btn-secondary btn-xs is-a-tag join-item"
                                        hx-trigger="click"
                                        hx-get="task_details?task_id={{ tasks_db[uuid].uuid }}"
                                        hx-target="#task_details">
                                    {{ tasks_db[uuid].id }}
                                </button>
                                {% endif %}
                                {% endfor %}
                            {% endif %}

                            {% if task.urgency > 20 %}
                            <div class="btn btn-xs btn-warning  join-item">{{ task.urgency }}</div>
                            {% elif task.urgency > 10 %}
                            <div class="btn btn-xs btn-primary  join-item">{{ task.urgency }}</div>
                            {% else %}
                            <div class="btn btn-xs btn-neutral  join-item">
                                {{ task.urgency }}</div>
                            {% endif %}

                            {% if task.due and task.status != 'completed' %}
                            <div class="btn btn-neutral  btn-xs join-item">
                                {{ date_proper(date=task.due, in_future=true) }}
                            </div>
                            {% endif %}

                            {% if task.start %}
                                <div class="btn btn-neutral btn-xs join-item">{{ date_proper(date=task.start) }}</div>
                            {% endif %}

                            {% if task.end %}
                            <div class="btn btn-neutral btn-xs join-item">{{ date_proper(date=task.end) }}</div>
                            {% endif %}

                            <div class="btn btn-neutral btn-xs join-item">
                                {% if task.entry %}{{ date_proper(date=task.entry) }}{% endif %}
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>