{% load i18n l10n fontawesome_5 %}
<div id="states-after" class="card">
    <div class="card-header rlp-r">
        <div class="row">
            <div class="col-sm-6">
                <h5>
                    <span class="badge badge-light">{{obj.after_states.count}}</span>
                    {% trans 'States after' %}
                </h5>
            </div>
            <div class="col-sm-6">
                <div class="d-flex justify-content-end">
                    {% if is_default_member and has_access  %}
                    <button class="btn btn-outline-default btn-modal" data-form-url="{% url 'ema:new-state' obj.id %}" title="{% trans 'Add new state after' %}">
                        {% fa5_icon 'plus' %}
                        {% fa5_icon 'layer-group' %}
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% if sum_before_states > sum_after_states %}
    <div class="alert alert-danger mb-0">
        {% trans 'Missing surfaces according to states before: ' %}{{ diff_states|floatformat:2 }} m²
    </div>
    {% endif %}
    <div class="card-body {% if tables_scrollable %}scroll-300{% endif %} p-2">
        <table class="table table-hover">
            <thead>
            <tr>
                <th class="w-50" scope="col">
                    {% trans 'Biotope type' %}
                </th>
                <th scope="col">
                    {% trans 'Surface' %}
                </th>
                <th class="w-10" scope="col">
                    <span class="float-right">
                        {% trans 'Action' %}
                    </span>
                </th>
            </tr>
            </thead>
            <tbody>
            {% for state in after_states %}
            <tr>
                <td>
                    <span>{{ state.biotope_type.parent.long_name }} {% fa5_icon 'angle-right' %} {{ state.biotope_type.long_name }} ({{state.biotope_type.short_name}})</span>
                    <br>
                    {% for detail in state.biotope_type_details.all %}
                        <span class="badge badge-pill rlp-r" title="{{detail}}">{{detail.long_name}}</span>
                    {% empty %}
                        <span class="badge badge-pill rlp-r-outline" title="{% trans 'No biotope type details' %}">{% trans 'No biotope type details' %}</span>
                    {% endfor %}
                </td>
                <td>{{ state.surface|floatformat:2 }} m²</td>
                <td class="align-middle float-right">
                    {% if is_default_member and has_access  %}
                    <button data-form-url="{% url 'ema:state-edit' obj.id state.id %}" class="btn btn-default btn-modal" title="{% trans 'Edit state' %}">
                        {% fa5_icon 'edit' %}
                    </button>
                    <button data-form-url="{% url 'ema:state-remove' obj.id state.id %}" class="btn btn-default btn-modal" title="{% trans 'Remove state' %}">
                        {% fa5_icon 'trash' %}
                    </button>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <div class="alert alert-danger mb-0">
                {% trans 'Missing' %}
            </div>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>