{% extends "base.html" %}
{% import "macros.html" as macros %}

{% block css %}
    {{super()}}
    <link href="{{ get_url(path="plant.css", trailing_slashes=false) | safe }}" rel="stylesheet">
{% endblock css %}

{% block content %}
{% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
<div class="card">

  <h1 class="title">
    {{ page.title }}
    (<i>{{data.bin_name}}</i>)
  </h1>

  {% block image %}
    {% set image = resize_image(path=data.image.url, width=1024, height=512) %}
    <figure class="plant-image">
      <img src="{{ image.url }}" alt="{{ data.image.alt }}" title="{{ data.bin_name }}">

      {% if data.image.source != "" %}
        <a class="image-source" href="{{ data.image.source }}" aria-label="Image Source">
          Source
        </a>
      {% endif %}
    </figure>
  {% endblock image %}
  <section>
    <a href="#site"><h2 id="site">Site</h2></a>
    
   {% if data.temp %}
    <div class="temp-bar" title="Tolerates temperatures between {{ data.temp.lower }}°C and {{ data.temp.upper }}°C. Dies below {{ data.temp.death }}°C.">
      <div class="temp lower-temp-death" 
        style="width: {{ data.temp.death / (4/10) }}%" aria-hidden="true">
        <label><i class="ri-skull-fill icon" aria-hidden="true"></i> &lt; {{ data.temp.death }} °C</label>
      </div>
      <div class="temp lower-temp-live" aria-hidden="true"
        style="width: {{ (data.temp.lower - data.temp.death) / (4/10) }}%"></div>
      <div class="temp temp-live" aria-hidden="true"
        style="width: {{ (data.temp.upper - data.temp.lower) / (4/10) }}%">
        <label><i class="ri-plant-fill icon" aria-hidden="true"></i>{{ data.temp.lower }}°C - {{ data.temp.upper }}°C</label>
      </div>
      <div class="temp upper-temp-live" aria-hidden="true"
        style="width: {{ (40- data.temp.upper) / (4/10) }}%"></div>
      <div class="shadow-pseudo"></div>
    </div>
   {% endif %}

    {% if data.site.light %}
      {{ macros::badge(icon="sun", class="light-badge", text=data.site.light, plain="Prefers " ~ data.site.light ~ " lighting conditions.") }}
    {% endif %}

    {% if data.site.humidity%}
      {{ macros::badge(icon="drop", class="humid-badge", text=data.site.humidity, plain="Prefers " ~ data.site.humidity~ " humidity.") }}
    {% endif %}

    {% block site %}
      {{ load_data(path="/static/plants/" ~ page.extra.data ~ "/site.md") | markdown | safe }}
    {% endblock site %}
  </section>

  <section>
    <a href="#care"><h2 id="care">Care</h2></a>

    {% if data.care.water_schedule %}
      {{ macros::badge(icon="drizzle", class="water-badge", text="every " ~ data.care.water_schedule, plain="Water every " ~ data.care.water_schedule ~ ".") }}
    {% endif %}

    {% if data.care.mist_schedule %}
      {{ macros::badge(icon="mist", class="mist-badge", text="every " ~ data.care.mist_schedule, plain="Mist every " ~ data.care.mist_schedule ~ ".") }}
    {% endif %}

    {% if data.care.clean_schedule %}
      {{ macros::badge(icon="brush-2", class="clean-badge", text="every " ~ data.care.clean_schedule, plain="Clean every " ~ data.care.clean_schedule ~ ".") }}
    {% endif %}

    {% block care %}
      {{ load_data(path="/static/plants/" ~ page.extra.data ~ "/care.md") | markdown | safe }}
    {% endblock care %}

    {% if data.additional_chapters %}
      {% block additional_chapters %}
        {% for key, chapter in data.additional_chapters %}
          <section>
            <a href="#{{ chapter.title | slugify }}"><h2 id="{{ chapter.title | slugify }}">{{ chapter.title }}</h2></a>
            {{ load_data(path="/static/plants/" ~ page.extra.data ~ "/" ~ chapter.file ~ ".md") | markdown | safe }}
          </section>
        {% endfor %}
      {% endblock additional_chapters %}
    {% endif %}
  </section>
  {{ page.content | safe }}
</div>
{% endblock content %}