<script type="text/html" id="booking_info_part"><div class="current-booking-info">
    <div class="cap mg">
        {{service.name}}
    </div>
    <div class="booking-info mg">
        <div class="booking-overview">
            <table>
                {{#if start_date}}
                <tr>
                    <td class="label"><i class="fal fa-calendar-alt ico"></i>{{_t 'date_start'}}:</td>
                    <td class="info">
                        {{#if recurring_dates}}
                        {{#each recurring_dates}}
                        <div class="date-item">
                            {{formatDateTime this 'date' ../time_diff}}{{#unless @last}}, {{/unless}}
                        </div>
                        {{/each}}
                        {{else}}
                        {{formatDateTime start_datetime 'date' time_diff}}
                        {{/if}}
                    </td>
                </tr>
                {{/if}}
                {{#if start_time}}
                <tr>
                    <td class="label"><i class="fal fa-hourglass-start ico"></i>{{_t 'starts_at'}}:</td>
                    <td class="info">
                        {{formatDateTime start_datetime 'time' time_diff}}
                    </td>
                </tr>
                {{/if}}
                {{#if end_time}}
                {{#ifCond service.hide_duration '==' false}}
                <tr>
                    <td class="label"><i class="fal fa-hourglass-end ico"></i>{{_t 'ends_at'}}:</td>
                    <td class="info">
                        {{formatDateTime end_datetime 'time' time_diff}}
                    </td>
                </tr>
                {{/ifCond}}
                {{/if}}

                {{#if (and time_zone time_offset)}}
                <tr>
                    <td class="label"><i class="fal fa-user-clock ico"></i>{{_t 'Timezone'}}</td>
                    <td class="info">
                        {{time_zone}}
                    </td>
                </tr>
                {{/if}}

                {{#ifShowProviderDetails provider.id}}
                {{#if provider.name}}
                {{#unless provider.class_id}}
                <tr>
                    <td class="label"><i class="fal fa-address-card ico"></i>{{_t 'provider_name'}}:</td>
                    <td class="info">
                        {{provider.name}}
                    </td>
                </tr>
                {{/unless}}
                {{/if}}
                {{/ifShowProviderDetails}}
                {{#if location}}
                <tr>
                    <td class="label"><i class="fal fa-map-marker-check ico"></i>{{_t 'location_name'}}:</td>
                    <td class="info">
                        {{setVariable 'locationItemId' (getUniqueId  prefix='iframe_location_')}}

                        {{#ifLocationHasAddress location}}
                            <a --data-toggle="modal" --data-target="#{{locationItemId}}"
                               href="{{#if (or location.lat location.lng)}}
                                   {{mapLink lat=location.lat lng=location.lng}}
                               {{else}}
                                   {{mapLink address=(formatAddress address1=location.address1 address2=location.address2 city=location.city name=location.title)}}
                               {{/if}}"
                               target="_blank">
                                {{formatAddress address1=location.address1 address2=location.address2 city=location.city name=location.title}}
                            </a>
                        {{else}}
                            {{formatAddress address1=location.address1 address2=location.address2 city=location.city name=location.title}}
                        {{/ifLocationHasAddress}}
                    </td>
                </tr>
                {{/if}}
                {{#if category}}
                <tr>
                    <td class="label"><i class="fal fa-child ico"></i>{{_t 'category_name'}}:</td>
                    <td class="info">
                        {{category.name}}
                    </td>
                </tr>
                {{/if}}

                {{#if code}}
                <tr>
                    <td class="label"><i class="far fa-cut ico"></i>{{_t 'code'}}:</td>
                    <td class="info">
                        {{code}}
                    </td>
                </tr>
                {{/if}}
                {{#if is_result}}
                <tr>
                    <td class="label"><i class="fal fa-info-circle ico"></i>{{_t 'status'}}:</td>
                    <td class="info">
                        {{_t status_text}}
                    </td>
                </tr>
                {{/if}}
                {{#ifCond discount '>' 0}}
                <tr>
                    <td class="label"><i class="fal fa-tags ico"></i>{{_t 'discount'}}:</td>
                    <td class="info">
                        {{formatDiscount discount add_percentage=true}}
                    </td>
                </tr>
                {{/ifCond}}
                {{#if invoice_id}}
                    <tr>
                        {{#if invoice_payment_received}}
                            <td class="label"><i class="fal fa-file-invoice-dollar ico"></i>{{_t 'invoice #'}}:</td>
                        {{else}}
                            <td class="label"><i class="fal fa-file-invoice-dollar ico"></i>{{_t 'offer #'}}:</td>
                        {{/if}}
                        <td class="info">
                            <a href="#invoice/view/{{invoice_id}}">#{{invoice_number}}</a>
                        </td>
                    </tr>
                {{/if}}
                {{#if online_meeting_id}}{{!--TODO format? more info? --}}
                    <tr>
                        <td class="label"><i class="fal fa-video ico"></i>{{_t 'Online meeting'}}:</td>
                        <td class="info">
                            <a target="_blank" href="#online-meeting/view/{{online_meeting_id}}">{{_t 'open'}}</a>
                        </td>
                    </tr>
                {{/if}}
            </table>
            {{!-- <div class="modal location-modal" id="{{locationItemId}}" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="full-info">
                        <div class="tab-pd">
                            <div class="close-full-info" data-dismiss="modal">
                                <i class="fa fa-times"></i>
                            </div>
                            <iframe width="100%" frameborder="0" style="border:0; height: 400px;"
                                    src="{{mapIframe address=(formatAddress address1=location.address1 address2=location.address2 city=location.city country=location.country_id zip=location.zip)}}"
                                    allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
        <div class="booking-calendar">
            <div class="calendar">
                <div class="header">{{formatDateTime start_datetime 'month' time_diff type='short'}}</div>
                <div class="body">{{formatDateTime start_datetime 'day' time_diff}}</div>
            </div>
        </div>
    </div>
    <div class="mg">
        {{#if code}}
            {{#if additional_fields_values}}
                <div class="accordion">
                    <a class="title collapsed" data-toggle="collapse" href="javascript:" data-target="#collapseAdditional{{id_prefix}}{{id}}" >
                        {{_t 'additional_fields'}}:
                    </a>
                    <div class="collapse {{#if isNotCollapsed}}in{{/if}}" id="collapseAdditional{{id_prefix}}{{id}}">
                        {{#each additional_fields_values}}
                            <p>
                                {{#ifCond field_type '!=' 'checkbox'}}
                                    <b>{{field_title}}:</b> {{value}}
                                {{else}}
                                    <b>{{field_title}}:</b> {{#if value}}{{_t 'yes'}}{{else}}{{_t 'no'}}{{/if}}
                                {{/ifCond}}
                            </p>
                        {{/each}}
                    </div>
                </div>
            {{/if}}
        {{/if}}
        {{#if prices.totals}}
            <div class="accordion">
                <a class="title collapsed" data-toggle="collapse" href="javascript:" data-target="#collapseInvoice{{id_prefix}}{{id}}" >
                    {{_t 'additional_items'}}:
                </a>
                <div class="collapse {{#if isNotCollapsed}}in{{/if}}" id="collapseInvoice{{id_prefix}}{{id}}">
                    {{#each prices.items}}
                        <p>
                            <b>{{name}}:</b>
                            <span>
                                {{qty}}{{#unless ../is_result}} x {{{formatPrice price=price currency=currency}}}{{/unless}}
                                {{#ifCond ../service.hide_duration '==' false}}
                                    {{#ifCond duration '>' 0}}
                                        ({{#ifCond type '==' 'attribute'}}+{{/ifCond}}{{formatDuration duration}})
                                    {{/ifCond}}
                                {{/ifCond}}
                            </span>
                        </p>
                    {{/each}}
                </div>
            </div>
        {{/if}}
    </div>
    {{#if prices.totals}}
        {{#unless is_result}}
        <div class="booking-price mg">
            <div class="row">
                <div class="col-sm-12">
                    <div class="wrapper">
                        {{#each prices.totals.taxes}}
                            <div class="full-price-with-tax">
                                {{name}}
                                : {{{formatPrice price=amount currency=../prices.totals.currency}}}
                            </div>
                        {{/each}}
                        {{#if prices.totals.totalDeposit }}
                            <div class="full-price full-price-with-deposit">
                                {{_t 'Full amount'}}
                                : {{{formatPrice price=prices.totals.total currency=prices.totals.currency}}}
                            </div>
                            <div class="full-price deposit-price">
                                {{_t 'Total deposit'}}
                                : {{{formatPrice price=prices.totals.totalDeposit currency=prices.totals.currency}}}
                            </div>
                        {{else}}
                            <div class="full-price">
                                {{_t 'Total'}}
                                : {{{formatPrice price=prices.totals.total currency=prices.totals.currency}}}
                            </div>
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
        {{/unless}}
    {{/if}}
    {{#if show_buttons}}
    <div class="booking-btns">
        <div class="row">
            <div class="col-sm-12">
                {{#if is_cancellable}}
                <div class="btn custom btn-with-icon sb_cancel_btn"  role="button" tabindex="0">
                    <span>
                        {{_t 'cancel'}}
                    </span>
                </div>
                {{/if}}
                {{#if is_result}}
                <a class="btn custom btn-with-icon sb-book sb_book_again" href="#{{bookingStepUrl location=location.id category=category.id categories=service.categories service=service.id provider=provider.id time=false date=false}}">
                    <span>{{_t 'book-again'}}</span>
                </a>
                {{/if}}

                {{#if (and can_reschedule_booking show_reschedule_booking_button)}}
                <a class="btn custom btn-with-icon sb-reschedule" href="#client/bookings/reschedule/{{id}}">
                    <span class="txt">{{_t 'reschedule'}}</span>
                </a>
                {{/if}}

                {{#if ticket}}
                <a class="btn custom btn-with-icon sb-ticket-download" target="_blank" href="/v2/ext/ticket/print/code/{{ticket}}{{#if ticket_hash}}/hash/{{ticket_hash}}{{/if}}">
                    <span class="txt">{{_t 'Ticket'}}</span>
                </a>
                {{/if}}

                {{#if show_calendar_button}}{{#ifCond status '!=' 'cancelled'}}
                <div class="btn custom btn-with-icon sb_add_to_cal " data-toggle="modal"
                     data-target="#cal_modal_{{code}}"  role="button" tabindex="0">
                    <span>
                        {{_t 'add_to_calendar'}}
                    </span>
                </div>
                <div class="modal fade add-to-calendar-modal" id="cal_modal_{{code}}" tabindex="-1" role="dialog"
                     aria-labelledby="cal_modal_label_{{code}}">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div class="wrap-ico calendar-plus">
                                    <i class="fal fa-calendar-plus"></i>
                                </div>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            class="fa fa-times" aria-hidden="true"></span></button>
                                <h4 class="modal-title" id="cal_modal_label_{{code}}">{{_t 'add_to_calendar'}}</h4>
                            </div>
                            <div class="modal-body">
                                <div class="tab-pd">
                                    {{setVariable 'address' null}}

                                    {{#if location}}
                                        {{setVariable 'address' (formatAddress address1=location.address1 address2=location.address2 city=location.city country=location.country_id zip=location.zip)}}
                                    {{/if}}

                                    <ul class="buttons calendar-popup">
                                        <li>
                                            <div class="btn google">
                                                <a target="_blank"
                                                   href="https://www.google.com/calendar/render?action=TEMPLATE&amp;text={{service.name}}&amp;details={{calendar_description}}{{#if location}}&amp;location={{location.title}}{{#if address}}, {{address}}{{/if}}{{/if}}&amp;dates={{formatDateTime start_datetime 'custom' time_diff format='YmdTHis'}}%2F{{formatDateTime end_datetime 'custom' time_diff format='YmdTHis'}}&amp;sf=1&amp;output=xml">
                                                    Google calendar
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="btn apple">
                                                <a target="_blank" href="/v2/client/get-ical/id/{{id}}/">
                                                    Apple iCalendar
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="btn outlook">
                                                <a target="_blank" href="/v2/client/get-ical/id/{{id}}/">
                                                    Outlook
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="btn outlook-com">
                                                <a target="_blank"
                                                   href="https://outlook.live.com/owa/?path=/calendar/view/Month&rru=addevent&startdt={{formatDateTime start_datetime 'custom' time_diff format='YmdTHis'}}&enddt={{formatDateTime end_datetime 'custom' time_diff format='YmdTHis'}}&subject={{service.name}}&location={{#if location}}{{location.title}}{{#if address}}, {{address}}{{/if}}{{/if}}&body={{calendar_description}}">
                                                    Outlook.com
                                                </a>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="btn yahoo">
                                                <a target="_blank"
                                                   href="http://calendar.yahoo.com/?v=60&amp;DUR={{service.duration}}&amp;TITLE={{service.name}}&amp;ST={{formatDateTime end_datetime 'custom' time_diff format='YmdTHis'}}">
                                                    Yahoo
                                                </a>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{/ifCond}}{{/if}}
            </div>
        </div>
    </div>
    {{/if}}
</div>
/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

