<template name="eventReplication">
	<div class="details-form event-replicate">
		<div class="form-group">
			<div class="form-group-element">
				<nav>
					<ul class="nav nav-tabs replica-nav-tabs">
						<li role="presentation" class="active">
							<a href="#datepicker" data-toggle="tab">
								<span class="fa fa-calendar-check-o fa-fw" aria-hidden="true"></span>
								{{mf 'event.replication.changeToPicker' 'Pick dates'}}
							</a>
						</li>
						<li role="presentation">
							<a href="#frequency" data-toggle="tab">
								<span class="fa fa-list fa-fw" aria-hidden="true"></span>
								{{mf 'event.replication.changeToPattern' 'Select frequency'}}
							</a>
						</li>
					</ul>
				</nav>
				<div class="tab-content replica-tab-content">
					<div class="tab-pane active" id="datepicker">
						<div class="js-replicate-datepick"></div>
					</div>
					<div class="tab-pane form-group" id="frequency">
						<label for="replicateStart">
							{{mf 'event.replication.interval.start' 'Interval Start'}}
						</label>
						<div class="input-group">
							<span class="input-group-addon">
								<span class="fa fa-calendar fa-fw" aria-hidden="true"></span>
							</span>
							<input type="text"
							       class="form-control js-replicate-date js-update-replicas"
							       id="replicateStart"
							       size="8"
							       value="{{replicaStart}}">
							<span class="replica-date-weekday">{{replicateStartDay}}</span>
						</div>
						<label for="replicateEnd">
							{{mf 'event.replication.interval.end' 'Interval End'}}
						</label>
						<div class="input-group">
							<span class="input-group-addon">
								<span class="fa fa-calendar fa-fw" aria-hidden="true"></span>
							</span>
							<input type="text"
							       class="form-control js-replicate-date js-update-replicas"
							       id="replicateEnd"
							       size="8"
							       value="{{replicaEnd}}">
							<span class="replica-date-weekday">{{replicateEndDay}}</span>
						</div>
						<label for="replicateFrequency">
							{{mf 'event.replication.repeat' 'Repeat'}}
						</label>
						<div class="radio">
							<label>
								<input type="radio"
								       class="js-replicate-frequency js-update-replicas"
								       name="replicateFrequency"
								       value="once">
								{{mf 'event.replication.freq.once' 'once'}}
							</label>
						</div>
						<div class="radio">
							<label>
								<input type="radio"
								       class="js-replicate-frequency js-update-replicas"
								       name="replicateFrequency"
								       value="daily">
								{{mf 'event.replication.freq.daily' 'every day'}}
							</label>
						</div>
						<div class="radio">
							<label>
								<input type="radio"
								       class="js-replicate-frequency js-update-replicas"
								       name="replicateFrequency"
								       value="weekly"
									   checked>
								{{mf'event.replication.freq.weekly' 'once a week'}}
							</label>
						</div>
						<div class="radio">
							<label>
								<input type="radio"
								       class="js-replicate-frequency js-update-replicas"
								       name="replicateFrequency"
								       value="biWeekly">
								{{mf'event.replication.freq.biWeekly' 'every 2 weeks'}}
							</label>
						</div>
					</div>
				</div>
			</div>
			<div class="form-group-element">
				{{#if replicaDateCount}}
					<label>
						{{#mf KEY='event.replication.createText' COUNT=replicaDateCount}}
							Create {COUNT, plural,
								one {a copy on this date}
								other {# copies on this dates}
							}
						{{/mf}}
					</label>
					<div class="replica-event-captions">
						{{#each replicaDates}}
							<div class="event-caption" title="{{fullDate this}}">
								<div class="event-caption-header-wrap">
									<div class="event-caption-header">
										<span class="fa fa-map-pin"></span>
										{{weekDay this}}
										<div class="event-caption-pseudoborder"></div>
									</div>
								</div>
								<div class="event-caption-body-wrap">
									<div class="event-caption-body">
										{{localDate this}}
									</div>
								</div>
							</div>
						{{/each}}
					</div>
				{{else}}
					<label>{{mf 'event.replication.noDates' 'No date(s) selected'}}</label>
					<div class="replica-event-captions">
						<div class="event-caption placeholder">
							<div class="event-caption-header-wrap">
								<div class="event-caption-header">
									<span class="fa fa-map-pin"></span>
									<div class="event-caption-pseudoborder"></div>
								</div>
							</div>
							<div class="event-caption-body-wrap">
								<div class="event-caption-body">
									{{localDate this.start}}
								</div>
							</div>
						</div>
					</div>
				{{/if}}
			</div>
		</div>
		<div class="replicate-actions">
			{{#if replicaDateCount}}
				{{> buttonSave event='js-replicate-btn'}}
			{{/if}}
			{{> buttonCancel event='js-cancel-replication'}}
		</div>
	</div>
</template>
