{% extends "default.html" %}

{% block head_includes %}
  {% if content_item.css_file %}
    <link rel="stylesheet" href="{{ parent_path }}static/css/{{ content_item.slug }}.css">
  {% endif %}
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
  {% if content_item.image_file %}
  <img src="{{ parent_path }}static/images/{{ content_item.image_file }}" alt = "content_item.image_file" class="img-fluid mb-5 rounded w-100 h-auto">
  {% endif %}
  {% if not content_item.omit_second_title %}
    <h1>{{ content_item.title }}</h1>
  {% endif %}
  
  <article>{{ content_item.html | safe }}</article>
  
  {% if content_item.audio_file %}
  <div id="audio" class="mb-4 mt-4">
    <audio controls>
      <source src="{{ parent_path }}static/audio/{{ content_item.audio_file }}" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
  {% endif %}
  
  <div id="categories">
    {% for category in content_item.categories %}
    <a href="{{ parent_path }}categories/{{ category }}.html" class="mx-1 text-decoration-none small text-muted">{{ category }} </a>
    {% endfor %}
  </div>
  <a href="../index.html" class="btn btn-secondary mt-4">← Back</a>
</div>
{% endblock %}

{% block footer_includes %}
  {% if content_item.js_file %}
    <script src="{{ parent_path}}static/js/{{ content_item.slug }}.js"></script>
  {% endif %}
{% endblock %}