<div class="ai1ec-modal-content">
    <div class="ai1ec-modal-header">
        <h4 class="ai1ec-modal-title">
            {{ title }}
        </h4>
    </div>
    <div class="ai1ec-modal-body ai1ec-form-horizontal">
        <div class="ai1ec-alert ai1ec-alert-danger ai1ec-hide"></div>
        <div class="">
            <ul class="ai1ec-nav ai1ec-nav-pills ai1ec-row">
                <li class="ai1ec-col-xs-2  ai1ec-text-center ai1ec-freq-daily ai1ec-freq">
                    <a href="#osec_daily_content" data-toggle="ai1ec-tab">
                        {{ label_daily }}
                    </a>
                </li>
                <li class="ai1ec-col-xs-2  ai1ec-text-center ai1ec-freq-weekly ai1ec-freq">
                    <a href="#osec_weekly_content" data-toggle="ai1ec-tab">
                        {{ label_weekly }}
                    </a>
                </li>
                <li class="ai1ec-col-xs-2  ai1ec-text-center ai1ec-freq-monthly ai1ec-freq">
                    <a href="#osec_monthly_content" data-toggle="ai1ec-tab">
                        {{ label_monthly }}
                    </a>
                </li>
                <li class="ai1ec-col-xs-2  ai1ec-text-center ai1ec-freq-yearly ai1ec-freq">
                    <a href="#osec_yearly_content" data-toggle="ai1ec-tab">
                        {{ label_yearly }}
                    </a>
                </li>
                <li class="ai1ec-col-xs-2  ai1ec-text-center ai1ec-freq-custom ai1ec-freq">
                    <a href="#osec_custom_content" data-toggle="ai1ec-tab">
                        {{ label_custom }}
                    </a>
                </li>
            </ul>
            <p></p>
        </div>

        <div class="ai1ec-tab-content" id="ai1ec-tab-content" data-active-freq="{{ selected_tab }}">
            <div id="osec_daily_content" data-freq="daily"
                 class="ai1ec-tab-pane ai1ec-freq ai1ec-freq-daily">
                {{ row_daily|raw }}
            </div>
            <div id="osec_weekly_content" data-freq="weekly"
                 class="ai1ec-tab-pane ai1ec-freq ai1ec-freq-weekly">
                {{ row_weekly|raw }}
            </div>
            <div id="osec_monthly_content" data-freq="monthly"
                 class="ai1ec-tab-pane ai1ec-freq ai1ec-freq-monthly">
                {{ row_monthly|raw }}
            </div>
            <div id="osec_yearly_content" data-freq="yearly"
                 class="ai1ec-tab-pane ai1ec-freq ai1ec-freq-yearly">
                {{ row_yearly|raw }}
            </div>
            <div id="osec_custom_content" data-freq="custom"
                 class="ai1ec-tab-pane ai1ec-freq ai1ec-freq-custom">
                {{ row_custom|raw }}
            </div>
        </div>
    </div>

    <div class="ai1ec-modal-footer">
        <div class="ai1ec-form-horizontal ai1ec-text-left ai1ec-end-field">
            <div class="ai1ec-form-group">
                <label for="end-input" class="ai1ec-control-label ai1ec-col-sm-3">
                    {{ label_endtime }}
                </label>
                <div class="ai1ec-col-sm-9" id="end-input" data-ending-type="{{ ending_type }}">
                    {{ end|raw }}
                </div>
            </div>

            {# #osec_count_holder display is handled in JS. #}
            <div id="osec_count_holder" class="ai1ec-form-group ai1ec-collapse" data-toggle="false">
                <label for="event_count" class="ai1ec-control-label ai1ec-col-sm-3">
                    {{ label_event_count }}
                </label>
                <div class="ai1ec-col-sm-9">
                    {{ count|raw }}
                </div>
            </div>
            <div id="osec_until_holder" class="ai1ec-form-group ai1ec-collapse" data-toggle="false">
                <label for="osec_until-date-input" class="ai1ec-control-label ai1ec-col-sm-3">
                    {{ until_label }}
                </label>
                <div class="ai1ec-col-sm-9">
                    <input type="text" class="osec-date-input" id="osec_until-date-input">
                    <input type="hidden" name="osec_until_time" id="osec_until-time" value="{{ until_value }}">
                </div>
            </div>
        </div>
        <input type="hidden" id="osec_is_box_repeat" value="{{ repeat }}">
        <button
            type="button"
            id="osec_repeat_apply"
            class="ai1ec-btn ai1ec-btn-primary ai1ec-btn-lg"
            data-loading-text="<i class='ai1ec-fa ai1ec-fa-spinner ai1ec-fa-fw ai1ec-fa-spin'></i> {{ loading_text }}"
        >
        <i class="ai1ec-fa ai1ec-fa-check ai1ec-fa-fw"></i>
            {{ label_apply }}
        </button>
        <a id="osec_repeat_cancel"
           class="ai1ec-btn ai1ec-btn-default ai1ec-text-danger ai1ec-btn-lg">
            <i class="ai1ec-fa ai1ec-fa-undo ai1ec-fa-fw"></i>
            {{ label_cancel }}
        </a>
    </div>
</div>
