{% extends '../_layouts/_main.twig' %}
{% set bannerHtml = '<div class="b-annr b-annr_type-b">
	<a href="https://alvadi.ee/link" class="overlink glow-blue"></a>
	<a href="#" class="closer square square-white"></a>
	<div class="hidden-xs">
		<div class="b-annr__bg" style="background-image: url(https://pics1.alpics.info/web/public/images/examples/b-annr-bg-center-desktop-0013.jpg); background-position: left center;">
			<div class="b-annr__bg__left" style="background-image: url(https://pics1.alpics.info/web/public/images/examples/b-annr-bg-left-desktop-0013.png)"></div>
			<div class="b-annr__bg__right" style="background-image: url(https://pics1.alpics.info/web/public/images/examples/b-annr-bg-right-desktop-0013.png)"></div>
		</div>
	</div>
	<div class="visible-xs">
		<div class="b-annr__bg" style="background-image: url(https://pics1.alpics.info/web/public/images/examples/b-annr-bg-mobile-0013.jpg)"></div>
	</div>
	<div class="b-annr__body">
		<div class="media media-responsive-xs">
			<div class="media-body">
				<div class="highlighter">
					<div class="title">
						<strong style="background: #FFC20E; color: #000000;"><span>Бесплатно доставим по Эстонии</span></strong>
					</div>
					<div class="description">
						<strong style="background: #003665; color: #ffffff;"><span>Запчасти тормозной системы</span></strong>
					</div>
				</div>
			</div>
			<div class="media-right media-middle hidden-xs">
				<div class="countdown countdown-flip color-black" data-time="March 03, 2019 23:59:59" data-lang="ru"></div>
			</div>
		</div>
	</div>
	<div class="mobile-deadline dark visible-xs">
		<span>Акция закончится 03.03.2019 в 23:59</span>
	</div>
</div>' %}
{% set bannerHtmlEscape = '<div class="b-annr b-annr_type-b">
	<a href="[link]" class="overlink glow-blue"></a>
	<a href="#" class="closer square square-white"></a>
	<div class="hidden-xs">
		<div class="b-annr__bg" style="background-image: url([centerImage]); background-position: left center;">
			<div class="b-annr__bg__left" style="background-image: url([leftImage])"></div>
			<div class="b-annr__bg__right" style="background-image: url([rightImage])"></div>
		</div>
	</div>
	<div class="visible-xs">
		<div class="b-annr__bg" style="background-image: url([mobileImage])"></div>
	</div>
	<div class="b-annr__body">
		<div class="media media-responsive-xs">
			<div class="media-body">
				<div class="highlighter">
					<div class="title">
						<strong style="background: #[backgroundA]; color: #[colorA];"><span>[textA]</span></strong>
					</div>
					<div class="description">
						<strong style="background: #[backgroundB]; color: #[colorB];"><span>[textB]</span></strong>
					</div>
				</div>
			</div>
			<div class="media-right media-middle hidden-xs">
				<div class="countdown countdown-flip color-black" data-time="[date]" data-lang="ru"></div>
			</div>
		</div>
	</div>
	<div class="mobile-deadline dark visible-xs">
		<span>Акция закончится [dateShort]</span>
	</div>
</div>' %}
{% block content %}
	<div class="panel panel-tabs">
		<ul class="nav nav-tabs nav-tabs_b">
			<li class="active">
				<a href="banner-list.html">Баннеры</a>
			</li>
			<li>
				<a href="infostrip-list.html">Инфополоски</a>
			</li>
		</ul>
		<div class="panel-body">

			<div class="cp-banners">
				<div class="cp-banners-header">
					<div class="pull-md-left">
						<h1>Tallinn Express</h1>
					</div>
					<div class="pull-md-right">
						<ul class="list-inline list-inline-4 text-right">
							<li><a href="banner-list.html" class="btn btn-lg btn-link">Отменить</a></li>
							<li><a href="#" class="btn btn-lg btn-primary">Сохранить изменения</a></li>
						</ul>
					</div>
					<div class="clearfix"></div>
				</div>

				<div class="cp-banners-filter">
					<div class="filter-row">
						<div class="filter-col-1">
							<div class="form-group">
								<div class="form-label">Название</div>
								<div class="form-field">
									<input class="form-control" type="text" value="Tallinn Express" placeholder="Введите название баннера" />
								</div>
							</div>
							<div class="mb-16"></div>
							<div class="form-group">
								<div class="form-label">Местоположение</div>
								<div class="form-field">
									<select class="form-control selectpicker" data-container="body">
										<option>Над хедером</option>
										<option>Под хедером</option>
										<option>Над футером</option>
									</select>
								</div>
							</div>
							<div class="mb-16"></div>
							<div class="form-group">
								<div class="form-label">Период</div>
								<div class="form-field">
									<input class="form-control datepicker cp-banners-filter__period" type="text" value="" data-datepicker-options="timePicker: true; timePicker24Hour: true; autoUpdateInput: false;" />
								</div>
							</div>
							<div class="mb-16"></div>
							<div class="form-group">
								<div class="form-check">
									<label><input class="cp-banners-filter__perpetual" type="checkbox" value="" /> Показывать баннер всегда</label>
								</div>
							</div>
							<div class="mb-16"></div>
							<div class="form-group">
								<div class="form-check">
									<label><input class="cp-banners-filter__countdown" type="checkbox" value="" checked /> Включить таймер</label>
								</div>
							</div>
							<div class="mb-16"></div>
							<div class="form-group">
								<div class="form-check">
									<label><input class="cp-banners-filter__activity" type="checkbox" value="" /> Отключить баннер</label>
								</div>
							</div>
						</div>
						<div class="filter-col-1">
							<!--<div class="cp-banners-files">
								Файлы баннера:
								<div class="uploader empty">
									<div class="uploader__button">
										<a href="#" class="btn btn-info">Выбрать файлы</a>
									</div>
								</div>
							</div>-->
							<div class="cp-banners-files">
								Файлы баннера:
								<div class="uploader">
									<table class="uploader__files">
										<tr>
											<td><a href="#" class="image-previewer" data-href="https://pics1.alpics.info/web/public/images/examples/b-annr-bg-left-desktop-0013.png">left.jpg</a></td>
											<td class="text-right">56.3 kb</td>
											<td><a class="closer size_16"></a></td>
										</tr>
										<tr>
											<td><a href="#" class="image-previewer" data-href="https://pics1.alpics.info/web/public/images/examples/b-annr-bg-right-desktop-0013.png">right.png</a></td>
											<td class="text-right">6.7 kb</td>
											<td><a class="closer size_16"></a></td>
										</tr>
										<tr>
											<td><a href="#" class="image-previewer" data-href="https://pics1.alpics.info/web/public/images/examples/b-annr-bg-center-desktop-0013.jpg">center.jpg</a></td>
											<td class="text-right">120.4 kb</td>
											<td><a class="closer size_16"></a></td>
										</tr>
										<tr>
											<td><a href="#" class="image-previewer" data-href="https://pics1.alpics.info/web/public/images/examples/b-annr-bg-mobile-0013.jpg">mobile.jpg</a></td>
											<td class="text-right">78.8 kb</td>
											<td><a class="closer size_16"></a></td>
										</tr>
									</table>
									<div class="uploader__button">
										<a href="#" class="btn btn-info">Выбрать файлы</a>
									</div>
								</div>
							</div>

							<div class="mb-12"></div>
							<div class="alert alert-danger">
								<i class="fa fa-exclamation-triangle"></i>
								Общий вес больше 150kb!
							</div>
						</div>
						<div class="filter-col-2">
							<div class="cp-banners-summtable">
								{% include '_parts/_tableShort.twig' %}
							</div>
							<div class="mb-4"></div>
							<a href="#modal-cp-banner" class="blank-link" data-toggle="modal">Настроить языки и домены/хосты</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>

				<div class="cp-banners-details">
					<!-- Nav tabs -->
					<ul class="nav nav-tabs nav-tabs_b">
						<li class="active">
							<a href="#tab-ee" data-toggle="tab" title="Estonian">
								<div class="flag"><img src="/images/flag/ee.png" alt="" /></div>
								<div class="bull active"></div>
							</a>
						</li>
						<li>
							<a href="#tab-ru" data-toggle="tab" title="Russian">
								<div class="flag"><img src="/images/flag/ru.png" alt="" /></div>
								<div class="bull active"></div>
							</a>
						</li>
						<li>
							<a href="#tab-fi" data-toggle="tab" title="Finnish">
								<div class="flag"><img src="/images/flag/fi.png" alt="" /></div>
								<div class="bull"></div>
							</a>
						</li>
						<li>
							<a href="#tab-gb" data-toggle="tab" title="English">
								<div class="flag"><img src="/images/flag/gb.png" alt="" /></div>
								<div class="bull"></div>
							</a>
						</li>
						<!--<li class="pull-right">
							<a href="#modal-cp-banner" data-toggle="modal">
								<i class="fa fa-ellipsis-v"></i>
							</a>
						</li>-->
					</ul>
					<div class="mb-32"></div>
					<!-- Tab panes -->
					<div class="tab-content">
						<div class="tab-pane active" id="tab-ee">

							<div class="cp-banners-details__banner">
								<!---->
								{{ bannerHtml }}
								<!---->
							</div>
							<div class="cp-banners-details__form">
								<div class="form-group">
									<div class="form-label">Статус</div>
									<div class="form-field">
										<span class="fa fa-circle color-secondary"></span>&nbsp; Истёк
										<!--<select class="form-control selectpicker" data-container="body">
											<option data-content="<span class='fa fa-circle color-success'></span>&nbsp; Активен">Активен</option>
											<option data-content="<span class='fa fa-circle color-danger'></span>&nbsp; Отключён">Отключён</option>
											<option data-content="<span class='fa fa-circle color-secondary'></span>&nbsp; Истёк">Истёк</option>
											<option data-content="<span class='fa fa-circle color-warning'></span>&nbsp; Ожидает">Ожидает</option>
										</select>-->
									</div>
								</div>
								<div class="mb-16"></div>
								<div class="media media-responsive-xs m-0 max-w-600">
									<div class="media-body">
										<div class="form-group">
											<div class="form-label">1-я строка на баннере</div>
											<div class="form-field">
												<input class="form-control" type="text" value="" data-maxlength="35" data-maxlength-error="Текст может не влезть на мобильном" />
												<!-- или так
												<input class="form-control" type="text" value="" data-maxlength="35" />
												<div class="help-block">Текст может не влезть на мобильном</div>
												-->
											</div>
										</div>
									</div>
									<div class="media-right">
										<div class="form-group text-nowrap">
											<div class="form-label">Текст (HEX-цвет)</div>
											<div class="form-field">
												<input class="form-control" type="text" value="" />
											</div>
										</div>
									</div>
									<div class="media-right">
										<div class="form-group text-nowrap">
											<div class="form-label">Фон (HEX-цвет)</div>
											<div class="form-field">
												<input class="form-control" type="text" value="" />
											</div>
										</div>
									</div>
								</div>
								<div class="mb-16"></div>
								<div class="media media-responsive-xs m-0 max-w-600">
									<div class="media-body">
										<div class="form-group">
											<div class="form-label">2-я строка на баннере</div>
											<div class="form-field">
												<input class="form-control" type="text" value="" data-maxlength="35" data-maxlength-error="Текст может не влезть на мобильном" />
											</div>
										</div>
									</div>
									<div class="media-right">
										<div class="form-group text-nowrap">
											<div class="form-label">Текст (HEX-цвет)</div>
											<div class="form-field">
												<input class="form-control" type="text" value="" />
											</div>
										</div>
									</div>
									<div class="media-right">
										<div class="form-group text-nowrap">
											<div class="form-label">Фон (HEX-цвет)</div>
											<div class="form-field">
												<input class="form-control" type="text" value="" />
											</div>
										</div>
									</div>
								</div>
								<div class="mb-16"></div>
								<div class="form-group">
									<div class="form-label">Цвет текстов у таймера</div>
									<div class="form-field">
										<select class="form-control max-w-200">
											<option value="">Чёрный</option>
											<option value="">Белый</option>
										</select>
									</div>
								</div>
								<div class="mb-16"></div>
								<div class="form-group checkbox-state max-w-800">
									<div class="form-label">
											<span class="form-check">
												<label><input class="checkbox-state__toggle" type="checkbox" value="" /> Ссылка с баннера (эстонский url)</label>
											</span>
									</div>
									<div class="form-field checkbox-state__item">
										<input class="form-control" type="text" value="" placeholder="http://alvadi.ee" />
									</div>
								</div>
								<div class="mb-16"></div>
								<div class="form-group checkbox-state">
									<div class="form-label">
										HTML - код
										<span class="px-16">&nbsp;</span>
										<span class="form-check">
											<label><input class="checkbox-state__toggle" type="checkbox" value="" /> Хочу отредактировать HTML-код</label>
										</span>
									</div>
									<div class="form-field checkbox-state__item">
										<textarea class="form-control wpc-100" cols="" rows="20">{{ bannerHtmlEscape|escape }}</textarea>
									</div>
								</div>
								<div class="mb-16"></div>
								<div class="form-group checkbox-state">
									<div class="form-label">
										Инфотекст
										<span class="px-16">&nbsp;</span>
										<span class="form-check">
												<label><input class="checkbox-state__toggle" type="checkbox" value="" /> Буду писать инфотекст (всплывает по клику на баннер)</label>
											</span>
									</div>
									<div class="form-field checkbox-state__item">
											<textarea class="form-control" cols="" rows="4">{#{{ '<div class="b-annr__modal">
    <a href="#" class="closer size_16 b-annr-modal-toggler"></a>
    <div class="h">Новогодняя акция!</div>
    Условия акция действуют до 23:59 05.01.2019.<br />
    Успейте совершить выгодную покупку со скидками.
    <div class="mb-12"></div>
    <a href="#">Товары со скидками</a> <i class="fa fa-angle-double-right"></i>
</div>'|escape }}#}</textarea>
									</div>
								</div>
							</div>

						</div>
						<div class="tab-pane" id="tab-ru">tab-ru</div>
						<div class="tab-pane" id="tab-fi">tab-fi</div>
						<div class="tab-pane" id="tab-gb">tab-gb</div>
					</div><!--.tab-content-->

				</div><!--.cp-banners-details-->

				<ul class="cp-banners-remove">
					<li>
						<a href="#" onclick="if(!confirm('Удалить баннер для всех языков насовсем?'))return false;">Удалить баннер для всех языков насовсем</a>
					</li>
				</ul>

				<div class="mb-24"></div>

				<ul class="list-inline list-inline-4 text-right">
					<li><a href="list.html" class="btn btn-lg btn-link">Отменить</a></li>
					<li><a href="#" class="btn btn-lg btn-primary">Сохранить изменения</a></li>
				</ul>
			</div><!--.cp-banners-->

		</div>
	</div>
{% endblock %}
{% block modals %}
	<div class="modal fade" id="modal-cp-banner" tabindex="-1" role="dialog" aria-labelledby="modal-cp-banner">
		<div class="modal-dialog modal-max modal-secondary" role="document">
			<div class="modal-content">
				<a href="#" class="cross" data-dismiss="modal"></a>
				<div class="modal-header">
					Матрица показа
				</div>
				<div class="modal-body">
					<div class="cp-banners-summtable">
						{% include '_parts/_table.twig' %}
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Отменить</button>
					<!--<button type="button" class="btn btn-primary">Создать <i class="fa fa-angle-double-right"></i></button>-->

					<!--This is temporary link-->
					<a href="panel-banners--item.html" type="button" class="btn btn-primary">Сохранить <i class="fa fa-angle-double-right"></i></a>
				</div>
			</div>
		</div>
	</div>
{% endblock %}