{% extends "layouts/default.html" %}
{% block title %}Category Tree{% endblock %}
{% block content %}
<div class="section w3-container content">
  <form>
    {{ token | safe }}
    <select class="w3-select  w3-padding"
            onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
      {% for category in categories %}
      <option value="/category/{{ category.id }}/view"{% if category.id == id %} selected{% endif %}>{{ category.name }}</option>
      {% endfor %}
    </select>

    <div class="w3-container w3-padding">
      <p>You have a hierarchy of data you want to represent:</p>
      
      <div class="w3-container w3-center w3-padding">
        <a target="_blank"
           href="/public/www.mikehillyer.com/categories.png">
          <img class="w3-image w3-card-4 w3-padding"
               style="width:80%;max-width:80%"
               src="/public/www.mikehillyer.com/categories.png"
               alt="categories">
        </a>
      </div>

      <p>If you want to store this hierarchy in a database (like an SQL database), the data has to be "normalized," or "flattened" ... </p>

      <div class="w3-container w3-center w3-padding">
        <a target="_blank"
           href="/public/www.mikehillyer.com/nested_categories.png">
          <img class="w3-image w3-card-4 w3-padding"
               style="width:80%;max-width:80%"
               src="/public/www.mikehillyer.com/nested_categories.png"
               alt="nested_categories">
        </a>
      </div>

      <p>Using the magic of SQL, the actual category ID becomes irrelevant as we use the left bounding number as the new index...</p>
      
      <div class="w3-container w3-center w3-padding">
        <a target="_blank"
           href="/public/www.mikehillyer.com/nested_numbered.png">
          <img class="w3-image w3-card-4 w3-padding"
               style="width:80%;max-width:80%"
               src="/public/www.mikehillyer.com/nested_numbered.png"
               alt="nested_numbered">
        </a>
      </div>

      <p>If you imagine it like a bunch of rubber bands (a different rubber band for each "category"), and the bands can wrap around each other, and there's an infinite number line that the bands line up on, kind of like if they were next to a ruler, and you can move bands around freely ...</p>

      <p><a href="https://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/">Original Article SQL Mumbo Jumbo</a></p>
      <p><b>TODO</b>: much better documentation on how this works...</p>
    </div>
  </form>
</div>
{% endblock %}