<div class="main-with-right-menu">
    <div class="vn-list" style="max-width: 30em;">
        <vn-card ng-if="data.length">
        <a
            ng-repeat="row in data"
            translate-attr="{title: 'Edit'}"
            ng-click="$ctrl.onEdit(row, $event)"
            class="vn-list-item">
            <vn-horizontal>
                <vn-one>
                    <div
                        ng-if="::row.from && !row.to"
                        margin-small-bottom>
                        {{::row.from | dateTime:'dd/MM/yyyy'}}
                    </div>
                    <div
                        ng-if="::!row.from || row.to"
                        margin-small-bottom>
                        <span ng-if="row.to">
                            {{::row.from | dateTime:'dd/MM/yyyy'}} - {{::row.to | dateTime:'dd/MM/yyyy'}}
                        </span>
                        <span ng-if="!row.to" translate>
                            Indefinitely
                        </span>
                        <span ng-if="row.weekDays">
                            ({{::$ctrl.formatWdays(row.weekDays)}})
                        </span>
                    </div>
                    <vn-label-value
                        label="Closing" 
                        value="{{::row.hour | dateTime:'hh:mm'}}">
                    </vn-label-value>
                    <vn-label-value
                        label="Traveling days" 
                        value="{{::row.travelingDays}}">
                    </vn-label-value>
                    <vn-label-value
                        label="Price" 
                        value="{{::row.price | currency:'EUR':2}}">
                    </vn-label-value>
                    <vn-label-value
                        label="Bonus" 
                        value="{{::row.bonus | currency:'EUR':2}}">
                    </vn-label-value>
                </vn-one>
                <vn-horizontal class="buttons">
                    <vn-icon-button
                        icon="delete"
                        translate-attr="{title: 'Delete'}"
                        ng-click="$ctrl.onDelete(row.id, $event)">
                    </vn-icon-button>
                </vn-horizontal>
            </vn-horizontal>
        </a>
        </vn-card>
    </div>
    <vn-bg-title ng-if="!data">
        <vn-spinner enable="true"></vn-spinner>
    </vn-bg-title>
    <vn-bg-title ng-if="data.length == 0" translate>
        No records found
    </vn-bg-title>
</div>
<vn-side-menu side="right">
    <vn-zone-calendar
        events="data"
        exclusions="exclusions">
    </vn-zone-calendar>
</vn-side-menu>
<vn-float-button
    icon="add"
    translate-attr="{title: 'Add'}"
    vn-bind="+"
    ng-click="$ctrl.onCreate()"
    fixed-bottom-right
    style="z-index: 10;">
</vn-float-button>
<vn-dialog 
    vn-id="dialog"
    on-response="$ctrl.onSave(response)">
    <tpl-body>
        <vn-vertical>
            <vn-radio-group
                field="$ctrl.eventType"
                options="$ctrl.options">
            </vn-radio-group>
            <div
                ng-if="$ctrl.eventType != 'day'"
                class="week-days">
                <span
                    ng-repeat="wday in $ctrl.wdays"
                    ng-class="{marked: $ctrl.selected.wdays[wday.code]}"
                    ng-click="$ctrl.selected.wdays[wday.code] = !$ctrl.selected.wdays[wday.code]">
                    {{wday.abr}}
                </span>
            </div>
            <vn-vertical ng-if="$ctrl.eventType == 'day'">
                <vn-date-picker
                    label="Day"
                    model="$ctrl.selected.from">
                </vn-date-picker>
            </vn-vertical>
            <vn-horizontal ng-if="$ctrl.eventType == 'range'">
                <vn-date-picker
                    label="From"
                    model="$ctrl.selected.from">
                </vn-date-picker>
                <vn-date-picker
                    label="To"
                    model="$ctrl.selected.to">
                </vn-date-picker>
            </vn-horizontal>
            <vn-input-time
                label="Closing"
                model="$ctrl.selected.hour">
            </vn-input-time>
            <vn-input-number
                label="Traveling days"
                model="$ctrl.selected.travelingDays"
                min="0"
                step="1">
            </vn-input-number>
            <vn-input-number
                label="Price"
                model="$ctrl.selected.price"
                min="0"
                step="0.01">
            </vn-input-number>
            <vn-input-number
                label="Bonus"
                model="$ctrl.selected.bonus"
                min="0"
                step="0.01">
            </vn-input-number>
        </vn-vertical>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="CANCEL" translate-attr="{value: 'Cancel'}"/>
        <button response="ACCEPT" translate>Save</button>
    </tpl-buttons>
</vn-dialog>
<vn-confirm 
    vn-id="confirm"
    message="This item will be deleted"
    question="Are you sure you want to continue?"
    on-response="$ctrl.delete(response)">
</vn-confirm>