{% extends "default.html" %}

{% block head_includes %}

{% endblock %}

{% block menu_links %}
            <a href="index.html">Home</a>
            <a id="categories_toggle" href="#">Categories</a>
            <a href="static/about.html">About</a>
{% endblock %}

{% block content %}
<div class="container">
  <div id="categories_menu" class="row justify-content-around mx-auto" style="visibility: hidden">
    {% for category in categories %}
      <a href="categories/{{ category }}.html" class="mx-2">{{ category }}</a>
    {% endfor %}
  </div>
</div>
<div class="container-fluid content-row mx-auto">
    <div class="row justify-content-start mx-auto">
      {% for content_item in content_items %}
        <div class="d-flex justify-content-center mb-4">
          <div class="card h-100 rounded mx-1 my-3" style="width: 400px;">
            <div class="card-header">
              {% if content_item.image_file %}
              <img src="content/{{ content_item.image_file }}" alt="{{ content_item.title }}" class="card-img-top img-fluid mx-auto d-block object-fit-scale rounded" style="max-height: 200px; width: auto;">
              {% else %}
              <img src="static/images/1x1.png" alt="{{ content_item.title }}" class="card-img-top img-fluid mx-auto d-block object-fit-scale rounded" style="height: 200px; width: auto;">
              {% endif %}
            </div>
            <div class="card-body d-flex flex-column">
              <h5 class="card-title"><a class="text-decoration-none text-body" href="content/{{ content_item.slug}}.html ">{{ content_item.title }}</a></h5>
              <p class="card-text mb-3">{{ content_item.preview | safe}}</p>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>


{% endblock %}

{% block footer_includes %}
<script defer>
  document.getElementById("categories_toggle").onclick = function() {
    categories_menu_item = document.getElementById("categories_menu")
    console.log(categories_menu_item.style.visibility)
    if (categories_menu_item.style.visibility == "hidden") {
      categories_menu_item.style.visibility = "visible"
    }
    else {
      categories_menu_item.style.visibility = "hidden"
    }
  }
</script>
{% endblock %}