<form class="rezon-form unload avia-form" role="form" id="avia-form-shoot" autocomplete="off">
<input type="hidden" name="segmentsCount" v-model="avia.segmentsCount" />
<input type="hidden" name="HistoryGuid" v-model="avia.historyGuid" />
<input type="hidden" name="book_type" v-model="avia.formType.value" />
<input type="hidden" name="filter_stops" :value="avia.filters.onlyDirectFlights ? '0' : '' " />
<input type="hidden" name="dateRange" :value="avia.intervalCount" />
<div class="fields-container" v-bind:class="[avia.formType.value]">
<div class="field airport from">
<label class="menu-title">
<span class="link-left"></span>
{{locale("FROM")}}
<span class="link-right v-hide"></span>
</label>
<div class="control-field">
<airport-input name="from_iata"
v-model="avia.aviFrom"
:placeholder="locale('PLACEHOLDER_AIRPORT2')"
input-class="book-from">
</airport-input>
<div class="error-box"></div>
</div>
</div>
<div v-on:click="swapAviaDest()" class="swap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" class="swap_arrows" height="17px" width="17px">
<polygon points="142.5,30 37.5,30 56.2,11.3 45,0 7.5,37.5 45,75 55.3,63.4 37.5,45 142.5,45" fill="#ffffff" />
<polygon points="7.5,105 112.5,105 93.8,86.3 105,75 142.5,112.5 105,150 94.7,138.4 112.5,120 7.5,120" fill="#ffffff" />
</svg>
</div>
<div class="field airport to">
<label class="menu-title">
<span class="link-left"></span>
{{locale("TO")}}
<span class="link-right v-hide"></span>
</label>
<div class="control-field">
<airport-input name="to_iata"
v-model="avia.aviTo"
:placeholder="locale('PLACEHOLDER_AIRPORT2')"
input-class="book-to">
</airport-input>
<div class="error-box"></div>
</div>
</div>
<div class="field date from">
<label v-for="currency in getFirstDateAttributeCurrency(dateAttributesThere)" v-bind:key="currency" :class="{'menu-title': true, 'with-price' : !!currency}">
<span class="link-left"></span>
<span>{{locale("THERE")}}</span>
<span v-if="!!currency" class="estimated-currency">
{{locale('ESTIMATED_PRICES_SHOWN_IN')}}
<span class="show-in currency-span" data-val="0" :data-cur="currency">
{{ currency }}
</span>
</span>
<span class="link-right"></span>
</label>
<div class="control-field">
<div class="date-wrapper noselect">
<d-date-picker v-model="avia.dateThere"
name="book_from_date"
:locale="locale"
:update-page-date-on-select="true"
:page-date-stamp="pageDateStamp"
:dates-attributes="dateAttributesThere"
:attributes-has-prices="avia.pricesCalendarEnabled"
:attributes-loading="dateAttributesThereLoading"
@input="updateMultyDates()"
@opened="loadPrices('there')">
<template slot="top" slot-scope="scopeSlot">
<div class="calendar-header">
<div class="title">{{locale('SELECT_DEPARTURE_DATE')}}</div>
<div class="botton-in-header" v-if="scopeSlot.isRange && scopeSlot.isMobile">
<a href="#" v-on:click.prevent="scopeSlot.hideCalendar()" class="done">{{locale('DONE')}}</a>
</div>
</div>
</template>
<template slot="popupFooterFilters">
<template v-for="currency in getFirstDateAttributeCurrency(dateAttributesThere)">
<span v-if="!!currency" class="estimated-currency">
{{locale('ESTIMATED_PRICES_SHOWN_IN')}}
<span class="show-in currency-span" data-val="0" :data-cur="currency">
{{ currency }}
</span>
</span>
</template>
<div class="popup-filters">
<label v-if="avia.pricesCalendarEnabled && !avia.isAirPromo">
<input type="checkbox" v-model="avia.filters.onlyDirectFlights" />
<span>{{locale("ONLY_DIRECT_FLIGHTS")}}</span>
</label>
<template v-if="avia.enabledDateRange && avia.enabledDateRange > 0 && !avia.isAirPromo">
<label v-if="avia.enabledDateRange && avia.enabledDateRange >= 3">
<input type="checkbox" v-bind:checked="avia.intervalCount == 3" v-on:click="clickOnDateRange(3)"/>
<span>±3 {{locale("DAYS")}}</span>
</label>
<label v-else-if="avia.enabledDateRange && avia.enabledDateRange >= 2">
<input type="checkbox" v-bind:checked="avia.intervalCount == 2" v-on:click="clickOnDateRange(2)"/>
<span>±2 {{locale("DAYS")}}</span>
</label>
<label v-else-if="avia.enabledDateRange && avia.enabledDateRange >= 1">
<input type="checkbox" v-bind:checked="avia.intervalCount == 1" v-on:click="clickOnDateRange(1)"/>
<span>±1 {{locale("DAY")}}</span>
</label>
</template>
</div>
</template>
</d-date-picker>
</div>
</div>
</div>
<div class="field date to">
<label v-for="currency in getFirstDateAttributeCurrency(dateAttributesBack)" v-bind:key="currency" :class="{'menu-title': true, 'with-price' : !!currency}">
<span class="link-left"></span>
<span>{{locale("BACK")}}</span>
<span v-if="!!currency" class="estimated-currency">
{{locale('ESTIMATED_PRICES_SHOWN_IN')}}
<span class="show-in currency-span" data-val="0" :data-cur="currency">
{{ currency }}
</span>
</span>
<span class="link-right"></span>
</label>
<div class="control-field">
<div class="date-wrapper noselect">
<d-date-picker v-if="avia.formType.value==='roundtrip'" v-model="avia.dateBack"
name="book_to_date"
:locale="locale"
popup-position-binded-to="book_from_date"
:page-date-stamp="pageDateStamp"
:dates-attributes="dateAttributesBack"
:attributes-has-prices="avia.pricesCalendarEnabled"
:attributes-loading="dateAttributesBackLoading"
@opened="loadPrices('back')">
<template slot="top" slot-scope="scopeSlot">
<div class="calendar-header">
<div class="title">{{locale('SELECT_RETURN_DATE')}}</div>
<div class="botton-in-header">
<a href="#" v-if="scopeSlot.isRange && scopeSlot.isMobile" v-on:click.prevent="scopeSlot.hideCalendar()" class="done">{{locale('DONE')}}</a>
<a href="#" v-on:click.prevent="scopeSlot.hideCalendar(function(){ typeChanged(0); })">{{locale('WITHOUT_RETURN_TICKET')}}</a>
</div>
</div>
</template>
<template slot="popupFooterFilters">
<template v-for="currency in getFirstDateAttributeCurrency(dateAttributesBack)">
<span v-if="!!currency" class="estimated-currency">
{{locale('ESTIMATED_PRICES_SHOWN_IN')}}
<span class="show-in currency-span" data-val="0" :data-cur="currency">
{{ currency }}
</span>
</span>
</template>
<div class="popup-filters">
<label v-if="avia.pricesCalendarEnabled && !avia.isAirPromo">
<input type="checkbox" v-model="avia.filters.onlyDirectFlights" />
<span>{{locale("ONLY_DIRECT_FLIGHTS")}}</span>
</label>
<template v-if="avia.enabledDateRange && avia.enabledDateRange > 0">
<label v-if="avia.enabledDateRange && avia.enabledDateRange >= 3">
<input type="checkbox" v-bind:checked="avia.intervalCount == 3" v-on:click="clickOnDateRange(3)" />
<span>±3 {{locale("DAYS")}}</span>
</label>
<label v-else-if="avia.enabledDateRange && avia.enabledDateRange >= 2">
<input type="checkbox" v-bind:checked="avia.intervalCount == 2" v-on:click="clickOnDateRange(2)" />
<span>±2 {{locale("DAYS")}}</span>
</label>
<label v-else-if="avia.enabledDateRange && avia.enabledDateRange >= 1">
<input type="checkbox" v-bind:checked="avia.intervalCount == 1" v-on:click="clickOnDateRange(1)" />
<span>±1 {{locale("DAY")}}</span>
</label>
</template>
</div>
</template>
</d-date-picker>
<span class="roundtrip_click" v-on:click="typeChanged(1); selectDateToCalendar();">{{locale("BACK")}}</span>
</div>
</div>
</div>
<div class="field pass">
<label class="menu-title">
<span class="link-left"></span>
{{locale("PASSENGERS")}}
<span class="link-right"></span>
</label>
<div class="control-field">
<div class="passengers" :class="{'has-error':avia.passengers.hasError}">
<div class="switch-box">
<span href="#" :class="{'switch': true, 'disabled' : avia.isAirPromo}">
<div class="passengers-text">{{passString}}</div>
</span>
</div>
<div class="select-age g-hide" tabindex="-1">
<div class="pass_types">
<div class="pass_type"
v-for="(type, index) in avia.passengers.types"
v-show="!type.hidden && avia.enabledPassengerTypes && avia.enabledPassengerTypes.indexOf(type.name) > -1"
:class="{'has-error':type.hasError,'active':type.count>0}">
<div class="pass_counter pull-right">
<div class="remove_pass" v-on:click="removePassenger(type.name)"></div>
<div class="count_pass"><span>{{type.count}}</span></div>
<div class="add_pass" v-on:click="addPassenger(type.name)"></div>
<div class="pas-delete" v-if="index > 5" v-on:click="deleteAdditionalPassenger(type, index)"></div>
<input type="hidden" :name="type.name" v-model="type.count" />
</div>
<div class="pass_inf">
<div class="category">{{locale(type.text)}}</div>
<div class="age">{{locale(type.desc)}}</div>
</div>
</div>
<div class="select-box"
v-click-outside="onClickOutside"
v-if="avia.passengers.additionalTypes && avia.passengers.additionalTypes.length > 0 && filterAdditional().length > 0">
<div class="select-type" v-on:click="toggleClass">
<span>{{locale("ADD_PASSENGER_TYPE")}}</span>
<div class="arrow" :class="{ rotate:isActive }"></div>
</div>
<div class="types-block" v-show="isActive">
<div class="pass_type"
v-for="(type, index) in avia.passengers.additionalTypes"
:key="index"
v-if="!type.hidden && avia.enabledPassengerTypes.indexOf(type.name) > -1"
v-on:click="addAdditionalPassenger(type, index)">
<span class="category">{{locale(type.text)}}</span>
<span class="age">{{locale(type.desc)}}</span>
</div>
</div>
</div>
</div>
<div class="pricePTCOnly" v-show="avia.passengers.showPricePTCOnly">
<label class="checkbox-wrapper" :class="{active:avia.passengers.pricePTCOnly}">
<div class="check_bull"></div>
<input type="checkbox" name="pricePTCOnly" v-model="avia.passengers.pricePTCOnly" :value="avia.passengers.pricePTCOnly?'True':''" />
<span>{{locale("ONLY_SELECTED_PTC")}}</span>
</label>
</div>
<div class="error-box" :style="{ display: avia.passengers.messages.length>0?'block':'none'}">
<label v-for="msg in avia.passengers.messages">{{locale(msg)}}</label>
</div>
<span class="button-hide hidden-xs">
<span class="hide-inner">{{locale("HIDE")}}</span>
</span>
<span class="button-hide visible-xs">
<button type="button" class="hide-inner search">{{locale("CONFIRM")}}</button>
</span>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="field find">
<button type="submit" class="search">{{locale("FIND")}}</button>
</div>
<div class="multy-route" v-if="avia.formType.value=='route'" v-bind:class="{last : index==avia.multyRoutes.length-1}" v-for="(route,index) in avia.multyRoutes">
<div class="field airport">
<label class="menu-title">
<span class="link-left"></span>
{{locale("FROM")}}
<span class="link-right v-hide"></span>
</label>
<div class="control-field">
<airport-input :name="'from_iata'+(index+2)" v-model="route.aviFrom" input-class="book-from" :placeholder="locale('PLACEHOLDER_AIRPORT2')"></airport-input>
<div class="error-box"></div>
</div>
</div>
<div class="field airport">
<label class="menu-title">
<span class="link-left"></span>
{{locale("TO")}}
<span class="link-right v-hide"></span>
</label>
<div class="control-field">
<airport-input :name="'to_iata'+(index+2)" v-model="route.aviTo" input-class="book-to" :placeholder="locale('PLACEHOLDER_AIRPORT2')"></airport-input>
<div class="error-box"></div>
</div>
</div>
<div class="field date">
<label class="menu-title">
<span class="link-left"></span>
{{locale("SORTIE")}}
<span class="link-right"></span>
</label>
<div class="control-field">
<div class="date-wrapper noselect">
<d-date-picker v-model="route.dateThere"
:name="'book_from_date'+(index+2)"
:locale="locale"
:update-page-date-on-select="true"
:page-date-stamp="pageDateStamp"
@input="updateMultyDates()"
:min-date="index>0?route.minDate:avia.dateThere[0]">
</d-date-picker>
</div>
</div>
</div>
<div class="field delete-leg" v-on:click="removeSegment(index)">
<div class="transp">
<span href="#" class="remove-leg">
<span>{{locale("REMOVE_LEG")}}</span>
</span>
</div>
</div>
</div>
<div class="add_segment" style="display:none;" v-show="avia.formType.value=='route' && avia.multyRoutes.length < avia.maxRoutesCount">
<div class="add transp" v-on:click="addSegment()">
<a><span>+ {{locale("CONTINUE_ROUTE")}}</span></a>
</div>
</div>
<div class="field hide_s">
<a href="#" class="transp dashed" v-if="avia.formType.value !== 'route' && !avia.isAirPromo" v-on:click.prevent="typeChanged(2)">
<span>{{locale(avia.formTypes[2].text)}}</span>
</a>
<div class="transp" style="display:none;" v-show="avia.formType.value === 'route'">
<a href="#" class="extended-form-link dashed" v-on:click.prevent="typeChanged(1)">
<span>{{locale("BACK_TO_SIMPLE_ROUTE")}}</span>
</a>
</div>
</div>
</div>
<div class="earlier" v-if="historyData && historyData.length > 0">
<div class="earlier-title">{{locale("SEARCHED")}}</div>
<div class="earlier-box">
<a href="#" class="earlier-item" v-for="history in historyData.slice(0, 3)" v-on:click.prevent="selectHistoryItem(history)">
<div class="point from">
<div class="point-date">
<span v-for="date in history.parseDateTimes(history.dateThere)">
{{ history.formatDate(date) }}
</span>
</div>
<div class="point-item">{{ history.formatAirport(history.aviFrom.Airport) }}</div>
</div>
<div class="arrow" :class="history.formType.value === 'oneway' ? 'oneway' : ''">
<span>→</span>
<span v-if="history.formType.value !== 'oneway'">←</span>
</div>
<div class="point to">
<div class="point-date" v-if="history.formType.value !== 'oneway'">
<span v-for="date in history.parseDateTimes(history.dateBack)">
{{ history.formatDate(date) }}
</span>
</div>
<div class="point-item">{{ history.formatAirport(history.aviTo.Airport) }}</div>
</div>
</a>
</div>
</div>
</form>