{% set availabilities = field.value.getValues() %}

<div class="accordion" id="availabilityAccordion">
    {% for day in ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] %}
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading-{{ day }}">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ day }}" aria-expanded="true" aria-controls="collapse-{{ day }}">
                    {{ day|trans({}, 'admin') }}
                </button>
            </h2>
            <div id="collapse-{{ day }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ day }}" data-bs-parent="#availabilityAccordion">
                <div class="accordion-body">
                    <table class="w-100">
                        <tr>
                            <th>{{ "pitchDashboard.timeSlot"|trans({}, 'admin') }}</th>
                            <th>{{ "pitchDashboard.priceHead"|trans({}, 'admin') }}</th>
                        </tr>
                        {% for availability in availabilities|filter(v => v.getDayOfWeek() == day) %}
                            <tr>
                                <td>{{ availability.startTime|date('H:i') }} - {{ availability.endTime|date('H:i') }}</td>
                                <td>{{ "pitchDashboard.price"|trans({
                                        '%currency%': app.request.locale == 'en' ? '£' : '€',
                                        '%price%': availability.price
                                    }, 'admin') }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        </div>
    {% endfor %}
</div>