{% extends 'base.html' %}
{% load i18n l10n static fontawesome_5 humanize %}

{% block head %}

{% endblock %}

{% block body %}

    <div id="detail-header" class="row">
        <div class="col-sm-12 col-md-12 col-lg-6">
            <h3>{% trans 'Compensation' %} {{comp.identifier}}</h3>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6">
            {% include 'compensation/detail/includes/controls.html' %}
        </div>
    </div>
    <hr>
    <div id="data" class="row">
        <div class="col-sm-12 col-md-12 col-lg-6">
            <div class="table-container">
                <table class="table table-hover">
                    <tr>
                        <th class="w-25" scope="row">{% trans 'Title' %}</th>
                        <td class="align-middle">{{comp.title}}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans 'compensates intervention' %}</th>
                        <td class="align-middle">
                            <a href="{% url 'intervention:open' comp.intervention.id %}">
                                {{comp.intervention.identifier}}
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans 'Checked' %}</th>
                        <td class="align-middle">
                            {% if comp.intervention.checked is None %}
                                <span>
                                    {% fa5_icon 'star' 'far' %}
                                </span>
                            {% else %}
                                <span class="check-star" title="{% trans 'Checked on '%} {{comp.intervention.checked.timestamp}} {% trans 'by' %} {{comp.intervention.checked.user}}">
                                    {% fa5_icon 'star' %}
                                </span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans 'Recorded' %}</th>
                        <td class="align-middle">
                            {% if comp.intervention.recorded is None %}
                                <span title="{% trans 'Not recorded yet' %}">
                                    {% fa5_icon 'bookmark' 'far' %}
                                </span>
                            {% else %}
                                <span class="registered-bookmark" title="{% trans 'Recorded on '%} {{comp.intervention.recorded.timestamp}} {% trans 'by' %} {{comp.intervention.recorded.user}}">
                                    {% fa5_icon 'bookmark' %}
                                </span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans 'Last modified' %}</th>
                        <td class="align-middle">
                            {{comp.created.timestamp|default_if_none:""|naturalday}}
                            <br>
                            {{comp.created.user.username}}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans 'Shared with' %}</th>
                        <td class="align-middle">
                            {% for user in comp.intervention.users.all %}
                                {% include 'user/includes/contact_modal_button.html' %}
                            {% endfor %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6">
            {% if geom_form.area == 0 %}
                <div class="alert alert-info">{% trans 'No geometry added, yet.' %}</div>
            {% endif %}
            {{geom_form.media}}
            {{geom_form.geom}}
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-6">
            {% include 'compensation/detail/includes/states-before.html' %}
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6">
            {% include 'compensation/detail/includes/states-after.html' %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-6">
            {% include 'compensation/detail/includes/actions.html' %}
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6">
            {% include 'compensation/detail/includes/deadlines.html' %}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-6">
            {% include 'compensation/detail/includes/documents.html' %}
        </div>
    </div>


{% with 'btn-modal' as btn_class %}
    {% include 'modal/modal_form_script.html' %}
{% endwith %}

{% endblock %}