{% 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) %}
    {{ macros::figure(url=image.url, alt=data.image.alt, source=data.image.source) }}
  {% endblock image %}
  <section>
    <a href="#site"><h3>Site</h3></a>

    {% if data.site.temp %}
      {{ macros::badge(icon="thermometer", class="temp-badge", text=data.site.temp, plain="Prefers " ~ data.site.temp ~ " temperatures.") }}
    {% 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"><h3>Care</h3></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 %}
  </section>
  {{ page.content | safe }}
</div>
{% endblock content %}