{% extends "base.html" %}
{% load ephios_crispy %}
{% load utils %}
{% load user_extras %}
{% load static %}
{% load i18n %}

{% block title %}
    {% translate "Working hours of" %} {{ userprofile }}
{% endblock %}

{% block content %}
    <h1 class="page-header">
        {% translate "Working hours of" %} {{ userprofile }}
    </h1>
    {% if filter_form %}
        <form class="row row-cols-sm-auto g-3">
            {% crispy_field filter_form.start wrapper_class="col-12 col-lg" show_labels=False %}
            <div class="col pt-1"> <p>{% translate "to" %}</p> </div>
            {% crispy_field filter_form.end wrapper_class="col-12 col-lg" show_labels=False %}
            {% crispy_field filter_form.type wrapper_class="col-12 col-lg" show_labels=False %}
            <div class="col-12">
                <button type="submit" class="btn btn-primary">{% translate "Filter" %}</button>
            </div>
        </form>
    {% endif %}

    {% if can_grant %}
        <a class="btn btn-sm btn-secondary"
           href="{% url "core:workinghours_add" userprofile.pk %}"><span class="fa fa-plus"></span> {% translate "Add working hours" %}</a>
    {% elif userprofile == request.user %}
        <a class="btn btn-sm btn-secondary"
           href="{% url "core:workinghours_request" %}"><span class="fa fa-plus"></span> {% translate "Request working hours" %}</a>
    {% endif %}
    <a class="btn btn-sm btn-secondary"
       href="{% url "core:workinghours_detail_export" userprofile.pk %}"><span class="fa fa-download"></span> {% translate "Export list" %}</a>

    <table id="workinghours_table" class="table table-striped display mt-2">
        <thead>
            <tr>
                <th>{% translate "Date" %}</th>
                <th>{% translate "Type" %}</th>
                <th>{% translate "Reason" %}</th>
                <th>{% translate "Hours" %}</th>
                <th>{% translate "Action" %}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>{% translate "Total" %}</b></td>
                <td></td>
                <td></td>
                <td class="tabular-numbers">{{ workhour_items.0|timedelta_in_hours }}<span class="d-none d-md-inline"> {% translate "hours" %}</span></td>
                <td></td>
            </tr>
            {% for item in workhour_items.1 %}
                <tr>
                    <td>{{ item.date|date:"SHORT_DATE_FORMAT" }}</td>
                    <td>{{ item.type }}</td>
                    <td class="break-word">{{ item.reason }}</td>
                    <td class="text-nowrap tabular-numbers">{{ item.duration|timedelta_in_hours }} <span class="d-none d-md-inline"> {% translate "hours" %}</span></td>
                    <td class="whitespace-nowrap">
                        {% if can_grant %}
                            {% if item.type == "event" %}
                                <a class="btn btn-secondary btn-sm text-nowrap" href="{% url "core:event_detail" item.origin_id "none" %}"><span class="fa fa-eye"></span> <span class="d-none d-md-inline">{% translate "View event" %}</span></a>
                            {% else %}
                                <a class="btn btn-secondary btn-sm text-nowrap" href="{% url "core:workinghours_edit" item.origin_id %}"><span class="fa fa-edit"></span> <span class="d-none d-md-inline">{% translate "Edit" %}</span></a>
                                <a class="btn btn-secondary btn-sm text-nowrap" href="{% url "core:workinghours_delete" item.origin_id %}"><span class="fa fa-trash"></span> <span class="d-none d-md-inline">{% translate "Delete" %}</span></a>
                            {% endif %}
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}