<div class="panel panel-default m-t-lg">
    <div class="panel-heading">
        <span class="font-sbold" translate>{{ 'app.admin.settings.reservations_parameters' }}</span>
    </div>
    <div class="panel-body">
        <div>
            <div class="row">
                <h3 class="m-l" translate>{{ 'app.admin.settings.confine_the_booking_agenda' }}</h3>
                <div class="col-md-2">
                    <h4 translate>{{ 'app.admin.settings.opening_time' }}</h4>
                    <uib-timepicker ng-model="windowStart.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
                </div>
                <div class="col-md-4 m-t">
                    <button name="button" class="btn btn-warning m-l" ng-click="save(windowStart)" translate>{{ 'app.shared.buttons.save' }}</button>
                </div>
                <div class="col-md-2">
                    <h4 translate>{{ 'app.admin.settings.closing_time' }}</h4>
                    <uib-timepicker ng-model="windowEnd.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
                </div>
                <div class="col-md-4 m-t">
                    <button name="button" class="btn btn-warning m-l" ng-click="save(windowEnd)" translate>{{ 'app.shared.buttons.save' }}</button>
                </div>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.max_visibility' }}</h3>
                <number-setting name="visibility_yearly"
                                settings="allSettings"
                                label="app.admin.settings.visibility_for_yearly_members"
                                classes="col-md-4"
                                fa-icon="fa-calendar"
                                min="1"
                                required="true">
                </number-setting>
                <number-setting name="visibility_others"
                                settings="allSettings"
                                label="app.admin.settings.visibility_for_other_members"
                                classes="col-md-4 col-md-offset-2"
                                fa-icon="fa-calendar"
                                min="1"
                                required="true">
                </number-setting>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_move_their_reservations' }}</h3>
                <div class="col-md-6">
                    <boolean-setting name="booking_move_enable"
                                     settings="allSettings"
                                     label="app.admin.settings.reservations_shifting"
                                     classes="m-l">
                    </boolean-setting>
                </div>
                <div class="col-md-6" ng-show="allSettings.booking_move_enable === 'true'">
                    <number-setting name="booking_move_delay"
                                    settings="allSettings"
                                    label="app.admin.settings.prior_period_hours"
                                    classes="col-md-8"
                                    fa-icon="fas fa-clock"
                                    min="0"
                                    required="allSettings.booking_move_enable === 'true'">
                    </number-setting>
                </div>
            </div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.ability_for_the_users_to_cancel_their_reservations' }}</h3>
                <div class="col-md-6">
                    <boolean-setting name="booking_cancel_enable"
                                     settings="allSettings"
                                     label="app.admin.settings.reservations_cancelling"
                                     classes="m-l">
                    </boolean-setting>
                </div>
                <div class="col-md-6" ng-show="allSettings.booking_cancel_enable === 'true'">
                    <number-setting name="booking_cancel_delay"
                                    settings="allSettings"
                                    label="app.admin.settings.prior_period_hours"
                                    classes="col-md-8"
                                    fa-icon="fas fa-clock"
                                    min="0"
                                    required="allSettings.booking_cancel_enable === 'true'">
                    </number-setting>
                </div>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.book_overlapping_slots_info' }}</h3>
                <div class="col-md-6">
                    <boolean-setting name="book_overlapping_slots"
                                     settings="allSettings"
                                     label="app.admin.settings.allow_booking"
                                     classes="m-l">
                    </boolean-setting>
                    <div class="alert alert-warning" ng-show="allSettings.book_overlapping_slots !== 'true'" translate>
                        {{ 'app.admin.settings.overlapping_categories_info' }}
                    </div>
                </div>
                <div class="col-md-6" ng-show="allSettings.book_overlapping_slots !== 'true'">
                    <check-list-setting name="'overlapping_categories'"
                                        label="'app.admin.settings.overlapping_categories' | translate"
                                        available-options="availableOverlappingOptions"
                                        on-success="onSuccess"
                                        on-error="onError">
                    </check-list-setting>
                </div>
            </div>
            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l m-t-lg" translate>{{ 'app.admin.settings.default_slot_duration' }}</h3>
                <p class="alert alert-warning m-h-md" translate>{{ 'app.admin.settings.default_slot_duration_info' }}</p>
                <number-setting name="slot_duration"
                                settings="allSettings"
                                label="app.admin.settings.duration_minutes"
                                classes="col-md-4"
                                fa-icon="fas fa-clock"
                                min="1"
                                required="true">
                </number-setting>
            </div>

            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l" translate>{{ 'app.admin.settings.pack_only_for_subscription_info' }}</h3>
                <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.pack_only_for_subscription_info_html' | translate"></p>
                <boolean-setting name="pack_only_for_subscription"
                                 settings="allSettings"
                                 label="app.admin.settings.pack_only_for_subscription"
                                 classes="m-l">
                </boolean-setting>
            </div>

            <div class="section-separator"></div>
            <div class="row">
                <h3 class="m-l" translate>{{ 'app.admin.settings.extended_prices' }}</h3>
                <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.extended_prices_info_html' | translate"></p>
                <boolean-setting name="extended_prices_in_same_day"
                                 settings="allSettings"
                                 label="app.admin.settings.extended_prices_in_same_day"
                                 classes="m-l">
                </boolean-setting>
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default m-t-lg">
    <div class="panel-heading">
        <span class="font-sbold" translate>{{ 'app.admin.settings.reservations_reminders' }}</span>
    </div>
    <div class="panel-body">
        <div class="row">
            <h3 class="m-l" translate>{{ 'app.admin.settings.notification_sending_before_the_reservation_occurs' }}</h3>
            <boolean-setting name="reminder_enable"
                             settings="allSettings"
                             label="app.admin.settings.reservations_reminders"
                             classes="m-l">
            </boolean-setting>
        </div>
        <div class="row" ng-show="allSettings.reminder_enable === 'true'">
            <number-setting name="reminder_delay"
                            settings="allSettings"
                            label="app.admin.settings.prior_period_hours"
                            classes="col-md-4"
                            fa-icon="fas fa-clock"
                            helper-text="app.admin.settings.default_value_is_24_hours"
                            min="0">
            </number-setting>
        </div>
    </div>
</div>


<div class="panel panel-default m-t-lg">
    <div class="panel-heading">
        <span class="font-sbold" translate>{{ 'app.admin.settings.display' }}</span>
    </div>
    <div class="panel-body">
        <div class="row">
            <h3 class="m-l" translate>{{ 'app.admin.settings.display_machine_reservation_user_name' }}</h3>
            <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.display_name_info_html' | translate"></p>
            <boolean-setting name="display_name_enable"
                             settings="allSettings"
                             label="app.admin.settings.display_name"
                             classes="m-l">
            </boolean-setting>
        </div>
      <div class="row">
        <h3 class="m-l" translate>{{ 'app.admin.settings.events_in_the_calendar' }}</h3>
        <p class="alert alert-warning m-h-md" translate>{{ 'app.admin.settings.events_in_calendar_info' }}</p>
        <boolean-setting name="events_in_calendar"
                         settings="allSettings"
                         label="app.admin.settings.show_event"
                         classes="m-l"></boolean-setting>
      </div>

      <div class="section-separator"></div>
      <div class="row">
          <h3 class="m-l" translate>{{ 'app.admin.settings.display_invite_to_renew_pack' }}</h3>
          <p class="alert alert-warning m-h-md" ng-bind-html="'app.admin.settings.packs_threshold_info_html' | translate"></p>
        <number-setting name="renew_pack_threshold"
                        settings="allSettings"
                        label="app.admin.settings.renew_pack_threshold"
                        classes="col-md-4"
                        fa-icon="fa-sliders-h"
                        min="0"
                        step="0.01">
        </number-setting>
      </div>
    </div>
</div>