{% extends "_skel.html" %}
{% block title %}{{ day.pretty }}{% endblock %}
{% block content %}
<div class="max-w-xl mx-auto card">
    <form method="POST" action="{{ url_for('main.index') }}">
        {{ form.csrf_token }}
        {{ form.text(placeholder="What did you accomplish today?", class_="placeholder-black", autofocus=True) }}
        <div class="flex mt-1">
            {{ form.submit_5(class_="w-1/3 mr-1 green-btn") }}
            {{ form.submit_10(class_="w-1/3 mx-1 orange-btn") }}
            {{ form.submit_15(class_="w-1/3 ml-1 red-btn") }}
        </div>
    </form>
</div>
<div class="max-w-lg mx-auto card">
    <img class="w-full h-48" src="{{ url_for('graph.graph_svg', ts=ts) }}">
</div>
<div class="max-w-lg mx-auto card">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h3 class="text-2xl">{{ day.pretty }}</h3>
        </div>
        {% if edit %}
        <div><a href="{{ url_for('main.index', day=day.url) }}" class="link">done</a></div>
        {% else %}
        {% if accomplishments %}
        <div><a href="{{ url_for('main.edit_day', day=day.url) }}" class="link">edit</a></div>
        {% else %}
        {% if not day.is_today %}
        <div><a href="{{ url_for('main.add_day', day=day.url, from="top") }}" class="link">add</a></div>
        {% endif %}
        {% endif %}
        {% endif %}
    </div>
    {% if edit %}
    <div class="my-1 ml-2 text-sm accomplishment">
        <div><a href="{{ url_for('main.add_day', day=day.url) }}" class="link">Add accomplishment</a></div>
    </div>
    <hr>
    {% endif %}
    {% for accomplishment in accomplishments %}
    <div class="flex ml-2 accomplishment">
        <div class="py-1 text">{{ accomplishment.text }}</div>
        <div class="py-1 {% if edit %} mr-2 {% endif %} difficulty-{{ accomplishment.difficulty_class }} difficulty">
            {{ accomplishment.difficulty }} XP
        </div>
        {% if edit %}
        <div class="flex-shrink-0 py-1 pl-2 text-sm italic border-l border-gray-300 border-solid">
            <div>
                <a class="text-red-700 underline hover:text-red-500"
                    href="{{ url_for('main.delete_accomplishment', accomplishment_id=accomplishment.id) }}">delete</a>
            </div>
            <div><a class="text-blue-700 underline hover:text-blue-500"
                    href="{{ url_for('main.edit_accomplishment', accomplishment_id=accomplishment.id) }}">edit</a></div>
        </div>
        {% endif %}
    </div>
    <hr>
    {% else %}
    <div class="my-1 ml-2 text-sm accomplishment">
        {% if false %}
        <!-- TODO: random text if no accomplishments -->
        {% endif %}
        {% if day.is_today %}
        <p>No accomplishments today... yet!</p>
        {% else %}
        <p>Nothing logged that day... but it's okay to take a break!</p>
        {% endif %}
    </div>
    {% endfor %}
    <div class="flex justify-end my-1 ml-2 accomplishment">
        <div><span class="pr-1 text-xs text-gray-700">total:</span> <span class="difficulty">{{ total_xp }} XP</div>
    </div>
    <div class="flex justify-between mt-2 text-sm accomplishment">
        <div><a href="{{ links.yesterday }}" class="text-blue-700">Previous day</a></div>
        {% if links.tomorrow %}<a href="{{ links.tomorrow }}" class="text-blue-700">Next day</a>
        {% endif %}
    </div>
</div>

{% endblock %}