<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
      rel="icon"
      type="image/svg+xml"
      href="{{ module.icon }}"
      >
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
      >
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
      >
    <style>
/* fonts, icons */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* structural */
html, h1, h2, h3, h4, h5, p, span, cite, figcaption, button, input, select, textarea {
    font-family: "Atkinson Hyperlegible", sans-serif;
}

body {
    color: hsl(0, 0%, 40%);
}

h2 {
    font-weight: bold;
    margin-bottom: 1em;
}

p {
    font-weight: normal;
    font-size: 1.1em;
    line-height: 1.3em;
    margin: 1.2em 0 1.2em 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"],
[type="image"],
[type="checkbox"],
[type="radio"],
summary {
    cursor: pointer;
}

button.nav-link:hover {
    color: white !important;
    background-color: hsl(289, 17%, 49%) !important;
}

.nav-link {
    color: hsl(306, 45%, 57%);
}

.accordion-button:not(.collapsed) {
    background-color: hsl(65, 46%, 58%);
}

.accordion-button.collapsed {
    background-color: hsl(308, 16%, 82%);
}

.text-bg-primary {
    color: hsl(289, 17%, 49%) !important;
    background-color: hsl(65, 46%, 58%) !important;
}

.alert-secondary {
    color: white;
    background-color: hsl(55, 17%, 49%);
    font-weight: bold;
}

a {
    color: hsl(55, 17%, 49%);
    background-color: white;
    font-weight: bold;
}

a:visited {
    color: hsl(55, 17%, 49%);
    background-color: white;
}

a:hover {
    color: white;
    background-color: hsl(55, 17%, 49%);
}

a {
    text-decoration: none !important;
}

details summary {
    list-style-type:none;
    font-size: 1.3em;
    margin-left:.5em;
    color:hsl(306, 45%, 57%);
}

.bywd_title {
    font-weight: bold;
    margin:.5em 0 .5em 0;
}

div.card {
    width: 93%;
}

p.card-text {
    margin-top: 0;
}

div.nav_tabs {
    width: 93%;
}

table.details {
    max-width: 23rem;
}

li.details {
    padding-top: 0;
    padding-left: 0;
}

div.ingred {
    max-height: 23rem;
}

span.closure_title {
    font-weight: bold;
    font-size: 1.4em;
}

div.closure_meta {
    margin-bottom: 1rem;
    max-width: 93%;
}

span.closure_meta {
    padding-top: 0;
    padding-left: 2em;
}

p.closure_meta {
    margin-top: 0;
}

p.focus {
    margin-top: 0;
}

p.focus span {
    font-size: 1.1em;
}

div.activity {
    width: 93%;
}

div.activity_title {
    margin-bottom: 0;
}

div.activity_text {
    margin: 0;
    padding-bottom: 1em;
}

div.activity_note {
    margin-bottom: 0;
    padding: 1em;
    background-color: hsl(308, 16%, 82%);
}

div.activity_note p {
    margin: 0;
}

div.activity_step {
    margin: .5em 0 0 1em;
}

span.action_span {
    font-size: 1.1em;
}

div#footer {
    margin: .5em 1em 0 0;
    font-size: smaller;
}

div#footer-thumb {
    float: left;
}

div#footer-thumb img {
    height: 3em;
    padding: .1em;
    float: left;
}

div#footer-content {
    float: left;
}

div#footer-content p {
    float: left;
    margin: 0;
    padding: 0 0 1em .5em;
}
    </style>
    <title>{{ module.title }}</title>
  </head>
  <body>
    <div id="main" class="container-fluid">
      <main>
	<div class="container">
	  <h1 class="bwyd_title">{{ module.title }}</h1>
	  <div class="row">
	    <div class="col">
	      <!-- module description -->
	      <div class="card"
		   >
		<div class="card-body">
		  <p class="card-text">{{ module.text }}</p>
		  &nbsp;
		  <a
		    href="{{ module.path }}"
		    target="export_iframe"
		    title="download the Bywd source file"
		    ><i class="bi bi-download"></i></a>
		</div>
	      </div>
	    </div>
	    <div class="col-6">
	      <!-- module metadata -->
	      <nav>
		<div class="nav nav-tabs" id="nav-tab" role="tablist"
		     >
		  <button class="nav-link active" id="nav-details-tab" data-bs-toggle="tab" data-bs-target="#nav-details" type="button" role="tab" aria-controls="nav-details" aria-selected="true"><strong>Details</strong></button>
		  <button class="nav-link" id="nav-ingred-tab" data-bs-toggle="tab" data-bs-target="#nav-ingred" type="button" role="tab" aria-controls="nav-ingred" aria-selected="false"><strong>Ingredients</strong></button>
		  <button class="nav-link" id="nav-sources-tab" data-bs-toggle="tab" data-bs-target="#nav-sources" type="button" role="tab" aria-controls="nav-sources" aria-selected="false"><strong>Sources</strong></button>
		  <button class="nav-link" id="nav-gallery-tab" data-bs-toggle="tab" data-bs-target="#nav-gallery" type="button" role="tab" aria-controls="nav-gallery" aria-selected="false"><strong>Gallery</strong></button>
		</div>
	      </nav>
	      <div class="tab-content" id="nav-tabContent">
		<!-- details -->
		<div class="tab-pane fade show active" id="nav-details" role="tabpanel" aria-labelledby="nav-details-tab" tabindex="0">
		  <table class="table details">
		    <tbody>
		      <tr>
			<th scope="row">serves:</th>
			<td>
			  <ul class="list-group list-group-flush">
			  {% for product in module.details.serves %}
			  <li class="list-group-item details">
			    {{ product }}
			  </li>
			  {% endfor %}
			  </ul>
			</td>
		      </tr>
		      <tr>
			<th scope="row">duration:</th>
			<td>{{ module.details.duration }}</td>
		      </tr>
		      {% if module.details.keywords|length > 0 %}
		      <tr>
			<th scope="row">keywords:</th>
			<td>
			  {% for keyword in module.details.keywords %}
  			  {{ keyword }}{{ ", " if not loop.last else "" }}
			  {% endfor %}
			</td>
		      </tr>
		      {% endif %}
		      <tr>
			<th scope="row">author:</th>
			<td>{{ module.details.author }}</td>
		      </tr>
		      <tr>
			<th scope="row">updated:</th>
			<td>{{ module.details.updated }}</td>
		      </tr>
		    </tbody>
		  </table>
		</div>
		<!-- ingred -->
		<div class="tab-pane fade overflow-scroll ingred" id="nav-ingred" role="tabpanel" aria-labelledby="nav-ingred-tab" tabindex="0">
		  <table class="table">
		    <tbody>
		      {% for ingr in module.ingredients %}
		      <tr>
			<td>{{ ingr.amount }}</td>
			<th>{{ ingr.text }}</th>
		      </tr>
		      {% endfor %}
		    </tbody>
		  </table>
		</div>
		<!-- sources -->
		<div class="tab-pane fade" id="nav-sources" role="tabpanel" aria-labelledby="nav-sources-tab" tabindex="0">
		  <ul class="list-group list-group-flush">
		    {% for cite_url in module.sources %}
		    <li class="list-group-item">
		      <a
			href="{{ cite_url }}"
			target="_blank"
			>
			{{ cite_url }}
		      </a>
		    </li>
		    {% endfor %}
		  </ul>
		</div>
		<!-- gallery -->
		<div class="tab-pane fade" id="nav-gallery" role="tabpanel" aria-labelledby="nav-gallery-tab" tabindex="0">
		  <ul class="list-group list-group-flush">
		    {% for post_url in module.gallery %}
		    <li class="list-group-item">
		      <a
			href="{{ post_url }}"
			target="_blank"
			>
			{{ post_url }}
		      </a>
		    </li>
		    {% endfor %}
		  </ul>
		</div>
	      </div>
	    </div>
	    <div class="col ratio ratio-1x1">
	      <!-- thumbnail -->
	      {% if module.image|length %}
	      <iframe
		src="{{ module.image }}"
		></iframe>
	      {% else %}
	      <img
		src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHv2zH8ACDcDZodV/EEAAAAASUVORK5CYII="
		>
	      {% endif %}
	    </div>
	  </div>
	  <!-- recipe directions -->
	  <h4 class="bg-tertiary-subtle">directions:</h4>
	  <div class="accordion" id="accordionExample">
	    {% for closure in module.closures %}
	    <div class="accordion-item">
	      <h3 class="accordion-header">
		<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="true" aria-controls="collapse{{ loop.index }}">
		  <span class="closure_title">{{ closure.title }}</span>
		</button>
	      </h3>
	      <div id="collapse{{ loop.index }}" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
		<div class="accordion-body">
		  <div class="row">
		    <!-- closure metadata -->
		    <div class="col">
		      <div class="card closure_meta">
			<div class="card-body">
			  <h5 class="card-title">yields:
			    {% for product in closure.yields %}
			    <br>
			    <span class="closure_meta">
			      <strong>{{ product }}</strong>
			    </span>
			    {% endfor %}
			  </h5>
			  <p class="card-text closure_meta">{{ closure.text }}</p>
			  <p>
			    {% if closure.keywords is defined and closure.keywords|length > 0 %}
			    <em>keywords:</em>
			    {% for keyword in closure.keywords %}
  			    {{ keyword }}{{ ", " if not loop.last else "" }}
			    {% endfor %}
			    {% endif %}
			  </p>
			</div>
		      </div>
		    </div>
		    <!-- closure requires -->
		    <div class="col">
		      <dl>
			{% for req in closure.requires %}
			<dt>
			  <strong>{{ req.name }}</strong>
			</dt>
			<dd>
			  <em>{{ req.text }}</em>
			</dd>
			{% endfor %}
		      </dl>
		    </div>
		  </div>
		  {% for focus in closure.foci %}
		  <!-- focus -->
		  <dl>
		    <dt>
		      <p class="focus">
			into
			<span class="badge text-bg-primary">{{ focus.container }}</span><strong>&nbsp;:</strong>
		      </p>
		    </dt>
		    {% for act in focus.activities %}
		    <!-- activity -->
		    <dd>
		      <div class="row">
			<div class="col">
			  <div class="card activity">
			    <div class="alert alert-secondary activity_title" role="alert">
			      {{ act.title }}
			    </div>
			    <div class="card-text activity_text">
			      {% for step_dict in act.steps %}
			      {% for key, val in step_dict.items() %}

			      {% if key == "note" -%}
			      <details
				>
				<summary><i class="bi bi-journal-text"></i></summary>
				<div class="alert alert-tertiary activity_note" role="alert">
				  <p>{{ val.text }}</p>
				</div>
			      </details>

			      {% elif key == "ingredients" -%}
			      <ul class="list-group list-group-flush">
				{% for item in val %}
				<li class="list-group-item">
				  add <strong>{{ item.name }}</strong>: {{ item.amount }}
				  {% if item.text|length %}
				  <em>&nbsp;&hellip; {{ item.text }}</em>
				  {% endif %}
				</li>
				{% endfor %}
			      </ul>
			      <hr>

			      {% elif key == "transfer" -%}
			      <div class="activity_step">
				transfer <strong>{{ val.name }}</strong>
			      </div>

			      {% elif key == "action" -%}
			      <div class="activity_step">
				with
				<span class="badge text-bg-primary action_span">
				  {{ val.tool }}
				</span><strong>&nbsp;:</strong>
				<br>
				<strong>{{ val.verb }}</strong>
				until <em>{{ val.text }}</em>
				<br>
				({{ val.time }})
			      </div>

			      {% elif key == "store" -%}
			      <div class="activity_step">
				store <strong>{{ val.text }}</strong>
				<br>
				upto <em>{{ val.upto }}</em>
			      </div>

			      {% elif key == "stove" -%}
			      <div class="activity_step">
				<strong>{{ val.text }}</strong>
				<br>
				until <em>{{ val.until }}</em>
				<br>
				({{ val.time }})
			      </div>

			      {% elif key == "cooler" -%}
			      <div class="activity_step">
				<strong>{{ val.text }}</strong>
				<br>
				until <em>{{ val.until }}</em>
				<br>
				({{ val.time }})
			      </div>

			      {% elif key == "oven" -%}
			      <div class="activity_step">
				<strong>{{ val.mode }}</strong> at <strong>{{ val.temperature }}</strong> 
				{% if val.text|length %}
				<em>&nbsp;&hellip; {{ val.text }}</em>
				{% endif %}
				<br>
				until <em>{{ val.until }}</em>
				<br>
				({{ val.time }})
			      </div>

			      {% endif %}
			      {% endfor %}
			      {% endfor %}
			    </div>
			  </div>
			</div>
			<div class="col">
			  &nbsp;
			</div>
		      </div>
		    </dd>
		    {% endfor %}
		  </dl>
		  {% endfor %}
		</div>
	      </div>
	    </div>
	    {% endfor %}
	  </div>
	  <!-- license -->
	  {% set lic = module.license %}
	  <footer>
	    <div id="footer">
	      <div id="footer-thumb">
		<img
		  src="{{ module.icon }}"
		  alt="Bwyd logo"
		  >
	      </div>
	      <div id="footer-content">
		<p>
		  {% if lic is not none %}
  		  license:
		  <strong>
		    <a
		      href="https://spdx.org/licenses/{{ lic.id }}.html"
		      target="_blank"
		      rel="license"
		      >{{ lic.name }}</a>
		  </strong>
		  <br>
		  {% endif %}
		  powered by
		  <a
		    href="https://github.com/DerwenAI/bwyd"
		    target="_blank"
		    >Bwyd</a>
		</p>
	      </div>
            </div>
	  </footer>
	</div>
      </main>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
      ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
      crossorigin="anonymous"
      ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
      integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
      crossorigin="anonymous"
      ></script>

    <script type="application/ld+json">
      {{ module.schema_org }}
    </script>
  </body>
</html>
