<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>{{instrument}}</title>
		<link
			rel="stylesheet"
			type="text/css"
			href="{{ url_for('static', filename='css/global.css') }}"
		/>
		<link rel="stylesheet" href="{{ url_for('static', filename='css/patches.css') }}" />
	</head>
	<body>
		<header>
			<a href="{{url_for('workbook')}}" class="parent">Workbook</a>
			<span class="path-slash"> / </span>
			<a href="{{url_for('instruments')}}">Instruments</a>
			<span class="path-slash"> / </span>
			<h2 class="title">{{instrument}}</h2>
			<div class="search">
				<svg
					class="icon"
					width="31"
					height="33"
					viewBox="0 0 31 33"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
				>
					<line
						x1="20.0607"
						y1="22.9393"
						x2="29.0607"
						y2="31.9393"
						stroke="currentColor"
						stroke-width="3"
					/>
					<circle cx="13" cy="13" r="11.5" stroke="currentColor" stroke-width="3" />
				</svg>
				<input type="text" name="search" id="search" />
			</div>
		</header>

		<main>
			<ul class="instruments list">
				<li class="card">
					<a class="stretched" href="{{url_for('add_patch', instrument=instrument)}}">
						<svg
							width="48"
							height="48"
							viewBox="0 0 48 48"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<line
								x1="25"
								y1="4.37114e-08"
								x2="25"
								y2="48"
								stroke="currentColor"
								stroke-width="3"
							/>
							<line
								x1="48"
								y1="25"
								x2="-8.74228e-08"
								y2="25"
								stroke="currentColor"
								stroke-width="3"
							/>
						</svg>
					</a>
				</li>

				{% for patch in patches %}
				<li class="card">
					<a
						class="stretched"
						href="{{url_for('patch', name=patch['slug'], instrument=instrument)}}"
					>
						<figure class="instrument">{{panel|safe}}{{patch['cables'] |safe}}</figure>
						<div class="overlay">
							<h3 class="title">{{patch['name']}}</h3>
						</div>
					</a>
				</li>
				{% endfor %}
			</ul>
		</main>
	</body>
</html>
