{% extends "base.html" %}
{% block content %}

<div class="container mt-5">
  <div class="row">
    <div class="col-md-3 mb-4">
      <div class="list-group shadow-sm">
        <a href="{% url 'loader_dashboard' %}" class="list-group-item list-group-item-action active">
          <i class="fas fa-th-large mr-2"></i>Dashboard
        </a>
        <a href="{% url 'loader_history' %}" class="list-group-item list-group-item-action">
          <i class="fas fa-history mr-2"></i>History Panel
        </a>
        <a href="{% url 'loader_permissions' %}" class="list-group-item list-group-item-action">
          <i class="fas fa-user-lock mr-2"></i>Permissions
        </a>
      </div>
    </div>
    <div class="col-md-9">
      <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
          <h2>Data Loading Commands</h2>
          <p class="text-muted mb-0">Select a command to load data into Machado Genomics. Commands are grouped by
            category.</p>
        </div>
      </div>

      <div id="loaderAccordion" class="accordion shadow-sm rounded">
        {% for group in groups %}
        <div class="card accordion-card">
          <div class="card-header p-0 bg-transparent border-0" id="heading-{{ group.id }}">
            <button class="btn accordion-header-btn collapsed" type="button" data-toggle="collapse"
              data-target="#collapse-{{ group.id }}" aria-expanded="false" aria-controls="collapse-{{ group.id }}">
              <span>
                <i class="fas {{ group.icon }} mr-3 text-secondary"></i>
                {{ group.name }}
              </span>
              <div class="d-flex align-items-center">
                <span class="badge badge-pill badge-light text-dark mr-3 border"
                  style="font-size: 0.8rem; font-weight: normal;">
                  {{ group.commands|length }} {% if group.commands|length == 1 %}tool{% else %}tools{% endif %}
                </span>
                <i class="fas fa-chevron-down toggle-icon text-muted"></i>
              </div>
            </button>
          </div>

          <div id="collapse-{{ group.id }}" class="collapse" aria-labelledby="heading-{{ group.id }}"
            data-parent="#loaderAccordion">
            <div class="card-body p-0 border-left border-right border-bottom" style="overflow: hidden;">
              <div class="list-group list-group-flush">
                {% for cmd in group.commands %}
                {% if cmd.status.loaded %}
                <div class="list-group-item py-3 command-item bg-light text-muted" style="cursor: default;">
                {% else %}
                <a href="{% url 'loader_command_form' cmd.name %}" class="list-group-item list-group-item-action py-3 command-item">
                {% endif %}
                  <div class="d-flex w-100 justify-content-between align-items-start">
                    <h5 class="mb-1 {% if not cmd.status.loaded %}text-primary{% endif %}">
                      {{ cmd.config.title }}
                      {% if cmd.status.loaded %}
                      <span class="badge badge-success ml-2">Loaded</span>
                      {% endif %}
                    </h5>
                    <small
                      class="{% if not cmd.status.loaded %}text-muted{% else %}text-secondary{% endif %} font-weight-bold"><code>python manage.py {{ cmd.name }}</code></small>
                  </div>
                  <p class="mb-1 {% if not cmd.status.loaded %}text-muted{% else %}text-secondary{% endif %} small">{{ cmd.config.help }}</p>
                  {% if cmd.status.loaded %}
                  <p class="mb-2 small text-secondary">
                    <strong>Version:</strong> {{ cmd.status.info.version }} <br>
                    <strong>Loaded on:</strong> {{ cmd.status.info.date_loaded|date:"Y-m-d H:i"|default:"Unknown" }}<br>
                    <a href="{% url 'loader_command_form' 'remove_ontology' %}{{ cmd.status.info.remove_params }}" class="text-danger d-block mt-1"><i class="fas fa-trash-alt mr-1"></i>Remove Ontology</a><br>
                  </p>
                  {% endif %}
                {% if cmd.status.loaded %}
                </div>
                {% else %}
                </a>
                {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}