{% extends 'layout_auth.html' %}
{% load crispy_forms_tags %}
{% block content %}

    <div class="row mb-3">
        <div class="col-sm-12 col-md-12 col-lg-6 text-sm-center text-lg-start">
            <h2 class="p-2"><span class="oi" data-glyph="person"></span> {{ user.first_name | title }} {{ user.last_name | title }}</h2>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6 text-sm-center text-lg-end">
            {% if user.level == '3' %}
            <a href="#!" class="btn btn-lg btn-secondary"><span class="oi" data-glyph="wrench"></span></a>
            {% endif %}
            <a href="#!" class="btn btn-lg btn-secondary"><span class="oi" data-glyph="document"></span></a>
            <a href="{% url 'logout' %}" class="btn btn-lg btn-danger"><span class="oi" data-glyph="account-logout"></span></a>
        </div>
    </div>

    <div class="row">
        <div class="col-2">
            <a class="btn btn-lg btn-light border" href="{% url 'timesheet' year=previous_month.year month=previous_month.month %}"><span class="oi" data-glyph="chevron-left"></span></a>
        </div>
        <div class="col-8 text-center">
            <h1>{{ current_month_name }} {{ current_month.year }}</h1>
        </div>
        <div class="col-2 text-end">
            {% if show_next %}
                <a class="btn btn-lg btn-light border" href="{% url 'timesheet' year=next_month.year month=next_month.month %}"><span class="oi" data-glyph="chevron-right"></span></a>
            {% else %}
                <a class="btn btn-lg btn-light border disabled" disabled="" href="#!"><span class="oi" data-glyph="chevron-right"></span></a>
            {% endif %}
        </div>
    </div>
    {% if show_form %}
        {% if max_daily_entries_quota == False %}
        <div class="row mb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        {% if projects == "True" %}
                            {% include 'forms/timesheet_entry_projects.html' %}
                        {% else %}
                            {% include 'forms/timesheet_entry.html' %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="row mb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <p class="lead pt-1"><span class="oi" data-glyph="warning"></span> Maximum daily entries met.</p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    {% endif %}


    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    {% if entries %}
                    <div class="row mb-3 border-bottom">
                        <div class="col-sm-6">
                            <h3 class="mt-2">Total Time Worked: {{ total_time_worked }}</h3>
                        </div>
                        <div class="col-sm-6 text-end mb-3">
                            <a href="#!" class="btn btn-lg btn-dark"><span class="oi" data-glyph="print"></span></a>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-sm-4 col-md-3">
                            <b>Date</b>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <b>Hours</b>
                        </div>
                        <div class="d-sm-none d-md-block col-md-3">
                            {% if projects == "True" %}
                            <b>Project</b>
                            {% endif %}
                        </div>
                        <div class="col-sm-4 col-md-3">
                        </div>
                    </div>

                    {% for entry in entries %}
                        <div class="row report-row pb-3 pt-3">
                            <div class="col-sm-6 col-md-3">
                                {{ entry.date | date:'F jS Y (D.)'}}
                            </div>
                            <div class="col-sm-6 col-md-3">
                                {{ entry.time_worked }}
                            </div>
                            <div class="col-sm-6 col-md-3">
                                {% if projects == "True" %}
                                    {% if entry.project %}
                                        {{ entry.project.name }}
                                    {% else %}
                                        -
                                    {% endif %}
                                {% endif %}
                            </div>
                            <div class="col-sm-6 col-md-3 text-sm-start text-md-end">
                                {% if entry.approved %}
                                    <span class="oi text-success" data-glyph="circle-check"></span>
                                {% else %}
                                    <a href="{% url 'edit_entry' entry_id=entry.uid %}" class="btn btn-secondary"><span class="oi" data-glyph="pencil"></span></a>
                                    <a href="#!" data-bs-toggle="modal" data-bs-target="#entry-{{ entry.id }}" class="btn btn-danger"><span class="oi" data-glyph="trash"></span></a>
                                {% endif %}
                            </div>
                            <div class="modal fade" id="entry-{{ entry.id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Removal Confirmation</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-12 lead mb-3 text-center">
                                                    Remove {{ entry.time_worked }} hours worked on {{ entry.date }}.
                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <button type="button" class="btn btn-lg form-control btn-secondary" data-bs-dismiss="modal">No</button>
                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <a href="{% url 'remove_entry' entry_id=entry.uid %}" class="btn btn-lg form-control btn-dark">Yes</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    {% else %}
                        <div class="row">
                            <div class="col-12 text-center">
                                <div class="lead">No time entered</div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}