{% extends 'Shop/base.html.twig' %}

{% block title %}
    {{ 'app.shop_owner.pages.opening_hours.head_title'|trans }}
{% endblock %}

{% block component_body %}
    <div class="card card-flush">
        <div class="card-body">
            <h2>{{ 'app.shop_owner.pages.opening_hours.title'|trans }}</h2>
            <div class="spinner-border text-primary" role="status" id="overlay-spinner-div" style="width: 4rem; height: 4rem;">
                <span class="sr-only">Loading...</span>
            </div>
            {% include "Shop/Timetable_commons/form.html.twig" with {'path': 'foxorders_shop_opening_hours_index'} %}
            <div class="table-responsive position-relative">
                <table class="table-time">
                    {% include "Shop/Timetable_commons/hour_title.html.twig" %}
                    {% include "Shop/Opening_hours/day_detail.html.twig" %}
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        var shop = "{{ shop.id }}";
        var openingHours = "{{ openingHours|json_encode() }}";
        var ohListWithErrors = "{{ ohListWithErrors }}";
        var input = '#opening_hours_day';
        var mode = 'opening';
        var firstRange = "{{ firstRange }}";
        var lastRange = "{{ lastRange }}";
        var translations = {
            'modes': {
                'pickup': '{{ 'app.global.tabs.mode.legends.pickup' | trans }}',
                'take_out': '{{ 'app.global.tabs.mode.legends.take-out' | trans }}',
                'delivery': '{{ 'app.global.tabs.mode.legends.delivery' | trans }}',
                'on_site': '{{ 'app.global.tabs.mode.legends.on-site' | trans }}',
                'opening': '{{ 'app.global.tabs.mode.legends.opening' | trans }}',
            },
            'validation': {
                'day': '{{ 'app.global.validation.opening_hours.day' | trans }}',
            }
        }
    </script>
    <script src="{{ asset('foxorders/js/shop/time-table-params.js') }}"></script>
    <script src="{{ asset('foxorders/js/shop/time-table.js') }}"></script>
    <script src="{{ asset('foxorders/js/validation/rules/shop/opening-hours.js') }}"></script>
{% endblock %}