{% load i18n %}

<div class="accordion-item" id="accordion-item-{{id}}">
    {{ period.id }}
    {% if period.resource.value %}
        {{ period.resource }}
    {% else %}
        {{ period.unit }}
    {% endif %}
    <div class="dropdown-time panel-group input-row" id="accordion{{id}}" role="tablist" aria-multiselectable="true">
        <div class="panel-heading">
            <div class="left-group">
                {% trans 'New period' as translated_unnamed_title %}
                <span class="panel-heading-tag">{{ period.name.value|default_if_none:translated_unnamed_title }}</span>
                <span class="panel-heading-period">{{ period.start.value|date:"j.n.Y" }} - {{ period.end.value|date:"j.n.Y" }}</span>
            </div>
            <div class="right-group">
                <button class="btn copy-time-btn" type="button" id="copy-time-period-{{ id }}">
                    <span class="glyphicon glyphicon-duplicate icon-left" aria-hidden="true"></span>
                    {% trans "Copy time period" %}
                </button>
                <a class="btn" role="button" data-toggle="collapse" data-parent="#accordion{{id}}" href="#collapse{{id}}" aria-expanded="true" aria-controls="#collapse{{id}}">
                    <span class="glyphicon glyphicon-edit icon-left"></span>
                    {% trans "Edit time period" %}
                    <span class="glyphicon glyphicon-chevron-down icon-right"></span>
                </a>
            </div>
        </div>
    </div>

    <div class="panel-collapse collapse" role="tabpanel" id="collapse{{id}}" aria-labelledby="heading{{id}}">
        <div class="container-fluid hours-wrapper">
            <div class="hours-table-header" id="period-list">
                <div class="input-row period-input" id="period-input-{{ id }}">
                    <div class="form-group schedule">
                        <label class="control-label input-label">{% trans "Name" %} *</label>
                        {{ period.name }}
                    </div>
                    <div class="form-group time-interval">
                        <label class="control-label input-label">{% trans "Time interval" %}</label>
                        <div class="input-row range-input date-input" id="date-inputs-{{ id }}">
                            {{ period.start }}
                            <span class="glyphicon glyphicon-minus"></span>
                            {{ period.end }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="hidden" id="days-management-form">
                {{ period.days.management_form }}
            </div>

            <div id="period-days-list">
                {% for day in period.days %}
                    {% include "respa_admin/common/_period_day.html" with day=day %}
                {% endfor %}
            </div>

            <div class="footer-buttons">
                <button class="btn pull-left delete-time btn-danger" type="button" id="remove-button-{{ id }}">
                    {% trans "Remove time period" %}
                </button>
            </div>
        </div>
    </div>
</div>