<form action="">
<table class="cp-vinRequest-spare">
	<thead>
	<tr>
		<th>Запчасть</th>
		<th>AL-код</th>
		<th>Замена</th>
		<th>VIN-код</th>
		<th>Partslink</th>
		<th>Japancars</th>
		<th>Ilcats</th>
		<th>Запчасть подходит?</th>
	</tr>
	</thead>
	<tbody>
	{% set products = [
		{
			"label" : "Рычаг TEKNOROT",
			"alcode" : "AL2093838",
			"vin" : "W0L0TGF35X2272992"
		},{
			"label" : "Несущий / направляющий шарнир RUVILLE 925037",
			"alcode" : "AL2093432",
			"vin" : "W0L0TGF35X2272992"
		}
	] %}
	{% for product in products %}
	<tr class="cp-vinRequest-spare-item">
		<td>{{ loop.index }} : {{ product.label }}</td>
		<td>
			<span class="icobox icobox_right size_12">
                <svg class="ico color-secondary"><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg>
                <a href="#">{{ product.alcode }}</a>
            </span>
		</td>
		<td>
			<div class="cp-vinRequest-spare-replacement{# form#}">
				<div class="u-replace">
					<a href="#" class="--toggle">Вставить замену AL-код</a>
				</div>
				<div class="u-form">
					<div class="form-group{# has-error#}">
						<div class="form-actions">
							<a href="#" class="closer size_16 --toggle"></a>
						</div>
						<div class="form-field">
							<input class="form-control" type="text" value="" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
							<div class="help-block hidden">Заполните поле!</div>
						</div>
						<div class="form-btn">
							<button class="btn btn-primary  --save">OK</button>
						</div>
					</div>
				</div>
				<div class="u-result">
					<span class="type-link dash-link --result"></span>
					<a href="#" class="--remove"><i class="fa fa-trash"></i></a>
					<input class="--replacementСode" type="hidden" value="" name="codeForReplacement" />
				</div>
			</div>
		</td>
		<td>{{ product.vin }}</td>
		<td>
			<span class="icobox icobox_right size_12">
                <svg class="ico color-secondary"><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg>
                <a href="#">partslink</a>
            </span>
		</td>
		<td>
			<span class="icobox icobox_right size_12">
                <svg class="ico color-secondary"><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg>
                <a href="#">japancars</a>
            </span>
		</td>
		<td>
			<span class="icobox icobox_right size_12">
	            <svg class="ico color-secondary"><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg>
	            <a href="http://ilcats.ru" target="_blank">ilcats.ru</a>
	        </span>
		</td>
		<td class="td-status">
			<ul class="status-list">
				<li><div class="form-check"><label title="Совместимость неизвестна"><input class="cp-vinRequest-spare-status" type="radio" name="products[{{ loop.index }}][status]" value="0" checked data-value="x3" /> ХЗ</label></div></li>
				<li><div class="form-check"><label title="Подходит"><input class="cp-vinRequest-spare-status" type="radio" name="products[{{ loop.index }}][status]" value="1" data-value="success" /> Да</label></div></li>
				<li><div class="form-check"><label title="Есть замена"><input class="cp-vinRequest-spare-status" type="radio" name="products[{{ loop.index }}][status]" value="2" data-value="replace" /> Замена</label></div></li>
				<li><div class="form-check"><label title="Не подходит"><input class="cp-vinRequest-spare-status" type="radio" name="products[{{ loop.index }}][status]" value="3" data-value="denied" /> Нет</label></div></li>
			</ul>
		</td>
	</tr>
	{% endfor %}
	</tbody>
</table>
<div class="cp-vinRequest-message">
	<div class="message-left">
		<div class="visible-x3">
			<div class="alert alert-danger d-inline-block">
				<svg class="arrow" width="43" height="18" viewBox="0 0 43 18" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M42.7055 7.03506L26.7869 0.208721L28.8344 17.4078L42.7055 7.03506ZM1.17732 13.4895L29.4775 10.1204L29.1228 7.14145L0.822681 10.5105L1.17732 13.4895Z" fill="#D70A0A" />
				</svg>
				<div class="flex-row row-8">
					<div class="flex-col-auto">
						<svg width="16" height="16"><use xlink:href="/images/svg/main-sprite.svg#info"></use></svg>
					</div>
					<div class="flex-col">
						Измени статус каждой запчасти в правом столбце (не должно быть “ХЗ”).
					</div>
				</div>
			</div>
		</div>
		<div class="visible-denied">
			<div class="messageBox">
				<a href="#" class="btn btn-primary"><strong>Перейти к созданию кредитного счёта</strong> <i class="ml-4 fa fa-angle-double-right"></i></a>
				<div class="mb-8"></div>
				Сюда подтянется номер кр. счёта, когда он будет создан для данного заказа: <a href="#" class="btn btn-primary"><i class="fa fa-refresh"></i></a>
				<div class="mb-8"></div>
				<button class="btn btn-primary" type="submit">Отправить Клиенту письмо и закрыть заявку</button>
			</div>
			<div class="messageBox">
				<strong>!! Свяжитесь с Клиентом и выясните что делать. Возможно, ему не нужен заказ без запчасти, которая не подошла. Если так, то отметьте все запчасти как неподходящие и оформите возврат на весь заказ.</strong>
				<div class="mb-8"></div>
				<strong>
					К этому заказу создан кр. счёт с номером:
					<a href="#" class="icobox icobox_right size_12"><svg class="ico color-secondary"><use xlink:href="/images/svg/main-sprite.svg#target-blank"></use></svg>3784903-3434</a>
				</strong>
				<div class="mb-8"></div>
				<strong>Будет оформлен возврат на запчасти:</strong>
				<br /><span class="label label-md square label-success">AL31161429</span>
				<br /><span class="label label-md square label-warning">AL30783317</span>
				<div class="mb-8"></div>
				<div class="max-w-450">
					<div class="mb-4 flex-row">
						<div class="flex-col"><strong>Клиенту будет отправлен email:</strong></div>
						<div class="flex-col-auto"><a href="#modal-mail-preview" class="dash-link" data-toggle="modal">Смотреть превью</a></div>
					</div>
					<div class="form-pseudo-textarea">
						Здравствуйте, Евгений!
						<br />Вы сделали заказ и запросили проверку совместимости запчастей с автомобилем по VIN-коду.
						<br />Мы проверили совместимость запчастей:
						<br />...
					</div>
				</div>
				<div class="mb-16"></div>
				<button class="btn btn-primary" type="submit">Отправить Клиенту письмо и закрыть заявку</button>
			</div>
		</div>
		<div class="visible-replace">
			<div class="messageBox">
				<div class="mb-4"><strong>Найден(ы) аналог(и) по схожим условиям</strong></div>
				<div class="max-w-450">
					<div class="mb-4 flex-row">
						<div class="flex-col"><strong>Клиенту будет отправлен email:</strong></div>
						<div class="flex-col-auto"><a href="#modal-mail-preview" class="dash-link" data-toggle="modal">Смотреть превью</a></div>
					</div>
					<div class="form-pseudo-textarea">
						Здравствуйте, Евгений!
						<br />Вы сделали заказ и запросили проверку совместимости запчастей с автомобилем по VIN-коду.
						<br />Мы проверили совместимость запчастей:
						<br />...
					</div>
				</div>
				<div class="mb-16"></div>
				<button class="btn btn-primary" type="submit">Отправить Клиенту письмо и закрыть заявку</button>
			</div>
		</div>
		<div class="visible-success">
			<div class="messageBox">
				<div class="mb-4"><strong>Все товары подошли</strong></div>
				<div class="max-w-450">
					<div class="mb-4 flex-row">
						<div class="flex-col"><strong>Клиенту будет отправлен email:</strong></div>
						<div class="flex-col-auto"><a href="#modal-mail-preview" class="dash-link" data-toggle="modal">Смотреть превью</a></div>
					</div>
					<div class="form-pseudo-textarea">
						Здравствуйте, Евгений!
						<br />Вы сделали заказ и запросили проверку совместимости запчастей с автомобилем по VIN-коду.
						<br />Мы проверили совместимость запчастей:
						<br />...
					</div>
				</div>
				<div class="mb-16"></div>
				<button class="btn btn-primary" type="submit">Отправить Клиенту письмо и закрыть заявку</button>
			</div>
		</div>
	</div>
	<div class="message-right">
		<div class="mb-12 form-group">
			<div class="form-label">Примечание к заказу (видят только админы)</div>
			<div class="form-field">
				<textarea class="form-control" cols="" rows="3"></textarea>
			</div>
		</div>
		<div class="d-flex align-items-center">
			<div class="d-flex-col">
				<div class="form-check">
					<label><input type="checkbox" name="" value="" />Ждём ответа Клиента</label>
				</div>
			</div>
			<div class="d-flex-col ml-auto">
				<button class="btn btn-default" type="submit" name="withoutSend" value="1">Сохранить, не отправляя Клиенту</button>
			</div>
		</div>
	</div>
</div>
</form>