{% extends 'lara_django_base/lara_base.html' %}
{% load mptt_tags %}

{% block toolbar %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"> {{ subtree_root.title }} - Projects </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{% url create_link %}" class="btn btn-warning btn-sm btn-outline-secondary" role="button">Add</a>
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
            <span data-feather="sync"></span>
            Sync
        </button>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-4">
    <nav id="navbar-projects" class="h-100 flex-column align-items-stretch pe-4 border-end">
      {% recursetree project_list %}

      {% if node.is_leaf_node %}
      <a class="nav-link ms-3 my-1" href="#item-1-1">{{ node.title }}</a>
      {% else %}
        <a class="nav-link" href="#item-1">{{ node.title }}</a>
      {% endif %}

      {% if not node.is_leaf_node %}
      <nav class="children nav nav-pills flex-column">
        {{ children }}
      </nav>
      {% endif %}

      {% endrecursetree %}

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-projects" data-bs-smooth-scroll="true" class="scrollspy-projects-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

{% if project_list %}
<ul>
  {% recursetree project_list %}
  <li>
    {% if node.is_leaf_node %}
    <a class="la_tree_item" href="{% url 'lara_django_projects:project-detail' node.project_id %}" title={{ node.description }}> {{ node.title }} </a>
    <p>{{ node.description }} </p>
    {% else %}
    <a class="la_subtree" href="{% url 'lara_django_projects:project-tree' node.project_id %}" title={{ node.description }}> {{ node.title }} </a>
    <p>{{ node.description }} </p>
    {% endif %}

    {% if not node.is_leaf_node %}
    <ul class="children">
      {{ children }}
    </ul>
    {% endif %}
  </li>
  {% endrecursetree %}
</ul>
{% else %}
<p>No sub-projects are available.</p>
{% endif %}

{% endblock %}