{% extends "orgapy/layout/skeleton.html" %}
{% load static %}

{% block title %}Orgapy{% endblock title %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'orgapy/css/objectives.css' %}" />
<link rel="stylesheet" href="{% static 'orgapy/css/projects.css' %}" />
<link rel="stylesheet" href="{% static 'orgapy/css/mood.css' %}" />
<script src="{% static 'orgapy/js/dragrank.js' %}"></script>
<script src="{% static 'orgapy/js/objectives.js' %}"></script>
<script src="{% static 'orgapy/js/projects.js' %}"></script>
<script src="{% static 'orgapy/js/mood.js' %}"></script>
{% endblock head %}

{% block menu_create %}
<li class="menu-item"><form action="{% url 'orgapy:tasks' %}" method="post">{% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}"><button tabindex="3"><i class="ri-task-line"></i> Task</button></form></li>
<li class="menu-item"><button id="buttonCreateObjective" tabindex="3"><i class="ri-focus-2-line"></i> Objective</button></li>
<li class="menu-item"><button id="buttonCreateProject" tabindex="3"><i class="ri-briefcase-line"></i> Project</button></li>
<hr>
{{ block.super }}
{% endblock menu_create %}

{% block menu %}
<li class="menu-item"><form action="{% url 'orgapy:calendars' %}" method="post">{% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}"><button type="submit" name="action" value="refresh"><i class="ri-reset-left-line"></i> Refresh events</button></form></li>
{{ block.super }}
{% endblock menu %}

{% block column_main %}

{% if event_groups %}
<div class="card">
    <div class="card-body">
        <div id="eventsContainer" class="coll spaced-lines">
            {% for group_date, group_events in event_groups %}
            <details open>
                <summary class="minititle">{{ group_date | date }}</summary>
                {% for event in group_events %}
                <div class="row {% if event.over %}muted{% endif %}" {% if event.location %}title="{{ event.location }}"{% endif %}>
                    <a class="event-dot"></a>
                    {% if event.time %}<div>{{ event.time | date:'H:i' }}</div>{% endif %}
                    <div class="ellipsis">{{ event.title }}</div>
                </div>
                {% endfor %}
            </details>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

{% if pending_mood_logs %}{% include 'orgapy/partials/mood_log_forms.html' %}{% endif %}

{% if settings.beach_mode %}
<div class="card">
    <h2 class="card-header">🏖️ Beach Mode On 🌞</h2>
    <div class="card-body">
        <p>
            Tasks, objectives and projects are hidden.<br>
            <span class="hint">Change this in <a href="{% url 'orgapy:settings' %}?ref={{ request.get_full_path | urlencode }}">settings</a>.</span>
        </p>
    </div>
</div>
{% else %}
{% if task_groups %}
<div class="card">
    <div class="card-body">
        <div id="tasksContainer" class="coll spaced-lines">
            {% for task_group in task_groups %}
            <details {% if task_group.open %}open{% endif %}>
                <summary class="minititle">{{ task_group.label }}</summary>
                {% for task in task_group.tasks %}
                <div class="task {% if task.overdue %}task-overdue{% endif %}">
                    <form action="{% url 'orgapy:task' task.id %}" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
                        <button type="submit" name="action" value="complete" title="Complete" class="task-button-complete submit-confirm" message="Complete '{{ task.title }}'?"><i class="ri-check-line"></i></button>
                    </form>
                    <a class="link-hidden" href="{{ task.get_absolute_url }}?next={{ request.get_full_path | urlencode }}" title="Start date: {{ task.start_date | date }}{% if task.due_date %} Due date: {{ task.due_date | date }}{% endif %}">{{ task.title }}</a>
                </div>
                {% endfor %}
            </details>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
<div id="objectivesContainer" class="objectives" tabindex="-1"></div>
<div id="projectsContainer" class="projects coll" tabindex="-1">
    {% for project in projects %}
    <div class="project-container" href="{{ project.get_absolute_url }}"></div>
    {% endfor %}
</div>
{% endif %}
<script>
fetchAndInflateObjectives(objectivesContainer, "{% url 'orgapy:objectives' %}", false);
for (const projectContainer of document.querySelectorAll(".project-container")) {
     bindProject(
        projectContainer,
        "{% url 'orgapy:suggestions' %}");
}
bindCreateProjectButton(buttonCreateProject, projectsContainer, "{% url 'orgapy:projects' %}", "{% url 'orgapy:suggestions' %}");
</script>
{% endblock %}