{% extends "core/base/base.html" %}
{% load heliport %}
{% comment %}
SPDX-FileCopyrightText: 2022 Helmholtz-Zentrum Dresden-Rossendorf (HZDR)

SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load static %}
{% block content %}
  <style>
        .tags-div{
            display: flex;
            flex-wrap: wrap;
        }
  </style>
  <div class="row">
    <div class="col">
      <h3>Data Sources</h3>
      {% if sources %}
        <form method="post">
          {% csrf_token %}
          <table class="table" x-data="{show_helpers: false}">
            <tr>
              <th></th>
              <th class="col-2">Kind</th>
              <th class="col-2">Name</th>
              <th class="col-4">Description</th>
              <th class="col-4">
                {% if helpers_exist %}
                  <label class="float-end">
                    <input type="checkbox" x-model="show_helpers" />
                    Show automatically created
                  </label>
                {% endif %}
              </th>
            </tr>
            {% for source in sources %}
              <tr {% if source.is_helper %}x-show="show_helpers"{% endif %}>
                <td class="align-middle">
                  <i class="fa-solid fa-xl {{ source.icon }}"
                     title="ID in class: {{ source.data_source_id }}"
                     {% if source.icon == "fa-folder" %}style="color: var(--bs-orange)"{% endif %}></i>
                </td>
                <td class="align-middle">
                  <a {% if source.module_url %}href="{{ source.module_url }}"{% endif %}>{{ source.kind }}</a>
                </td>
                <td class="align-middle">{{ source.label }}</td>
                <td class="align-middle">
                  {{ source.description }}
                  <div style="display: flex;
                              flex-wrap: wrap"
                       data-tag-container="{{ source.digital_object_id }}"></div>
                </td>
                <td class="align-middle">
                  <div class="container">
                    <div class="row">
                      {% for action in source.actions %}
                        <div class="col-md d-grid ps-2 pe-0 py-1">
                          <a class="btn btn-primary {% if update %}disabled{% endif %}"
                             href="{{ action.link }}">{{ action.name }}</a>
                        </div>
                      {% endfor %}
                      {% if source.browser_supported_uri %}
                        <div class="col-md d-grid ps-2 pe-0 py-1">
                          <a class="btn btn-primary {% if update %}disabled{% endif %}"
                             href="{{ source.uri }}"
                             target="_blank">Open</a>
                        </div>
                      {% endif %}
                      {% if source.protocol == 'ssh' %}
                        <div class="col-md d-grid ps-2 pe-0 py-1">
                          <a class="btn btn-primary {% if update %}disabled{% endif %}"
                             href="{% url 'data_source:download' project.pk source.data_source_id %}">Open</a>
                        </div>
                      {% endif %}
                      <div class="col-md d-grid ps-2 pe-0 py-1">
                        <a class="btn btn-secondary {% if update or not source.owner %}disabled{% endif %}"
                           {% if source.directly_editable %} href="{% url 'data_source:update' project.pk source.digital_object_id %}" {% else %} href="{{ source.module_url }}" {% endif %}
                           {% if not source.owner %}title="You can only edit your own data sources"{% endif %}>Edit</a>
                      </div>
                      <div class="col-md d-grid ps-2 pe-0 py-1">
                        <button class="btn btn-danger"
                                name="remove"
                                type="submit"
                                {% if update %}disabled{% endif %}
                                value="{{ source.digital_object_id }}">Remove</button>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </table>
        </form>
      {% endif %}
      <br />
      {% if update %}
        <h4>Update a Data Source</h4>
      {% else %}
        <h4>Add a Data Source</h4>
      {% endif %}
      {% include "core/partials/data_source_warning.html" %}
      {% comment %} import tabs {% endcomment %}
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        {% for form_module in form_modules %}
          <li class="nav-item" role="presentation">
            <a class="nav-link {% if edit_module == form_module.module.module_id %}active{% elif update %}disabled{% endif %}"
               style="color:black !important;
                      {% if update and not edit_module == form_module.module.module_id %}background-color: lightgray;{% endif %}"
               data-bs-toggle="tab"
               href="#module_{{ form_module.module.module_id }}"
               role="tab"
               aria-controls="module_{{ form_module.module.module_id }}"
               aria-selected="{% if edit_module == form_module.module.module_id %}true{% elif update %}false{% endif %}">{{ form_module.module.name }}</a>
          </li>
        {% endfor %}
        <li class="nav-item" role="presentation">
          <a class="nav-link {% if edit_module is None %}active{% elif update %}disabled{% endif %}"
             style="color:black !important;
                    {% if update and not edit_module is None %}background-color: lightgray;{% endif %}"
             data-bs-toggle="tab"
             href="#import_generic"
             role="tab"
             aria-controls="import_generic"
             aria-selected="{% if edit_module is None %}true{% elif update %}false{% endif %}">Generic URL</a>
        </li>
        {% if no_form_modules %}
          <li class="nav-item" role="presentation">
            <a class="nav-link{% if update %} disabled{% endif %}"
               style="color:black !important;
                      {% if update %}background-color: lightgray;{% endif %}"
               data-bs-toggle="tab"
               href="#no_form_modules"
               role="tab"
               aria-controls="no_form_modules"
               aria-selected="false">More</a>
          </li>
        {% endif %}
      </ul>
      <div class="tab-content" id="myTabContent" style="margin-bottom: 1em;">
        {% comment %} generate forms from other modules {% endcomment %}
        {% for module_form in form_modules %}
          <div class="tab-pane fade {% if edit_module == module_form.module.module_id %}show active{% endif %}"
               id="module_{{ module_form.module.module_id }}"
               role="tabpanel"
               aria-labelledby="module_{{ module_form.module.module_id }}"
               style="margin-top: 0.5em">
            <form method="post"
                  {% if module_form.form.alpine_data %}x-data="{{ module_form.form.alpine_data }}"{% endif %}>
              {% csrf_token %}
              <input type="hidden"
                     name="module-form"
                     value="{{ module_form.module.module_id }}">
              <table class="table">
                {{ module_form.form }}
              </table>
              <table style="margin-bottom: 1em;">
                <tr>
                  {% if update == False %}
                    <td style="padding-left: 0.75rem">
                      <button class="btn btn-primary">Add</button>
                    </td>
                  {% else %}
                    <td style="padding-left: 0.75rem">
                      <button class="btn btn-primary">Save</button>
                    </td>
                    <td style="padding-left: 0.75rem">
                      <a class="btn btn-secondary"
                         href="{% url 'data_source:list' project.pk %}">Cancel</a>
                    </td>
                  {% endif %}
                </tr>
              </table>
            </form>
          </div>
        {% endfor %}
        <div class="tab-pane fade {% if edit_module is None %}show active{% endif %}"
             id="import_generic"
             role="tabpanel"
             aria-labelledby="generic">
          {% comment %} import generic URI {% endcomment %}
          <form method="post" x-data="{{ generic_form.alpine_data }}">
            {% csrf_token %}
            <table class="table">
              {{ generic_form }}
            </table>
            <table style="margin-bottom: 1em;">
              <tr>
                {% if update == False %}
                  <td style="padding-left: 0.75rem">
                    <button class="btn btn-primary">Add</button>
                  </td>
                {% else %}
                  <td style="padding-left: 0.75rem">
                    <button class="btn btn-primary">Save</button>
                  </td>
                  <td style="padding-left: 0.75rem">
                    <a class="btn btn-secondary"
                       href="{% url 'data_source:list' project.pk %}">Cancel</a>
                  </td>
                {% endif %}
              </tr>
            </table>
          </form>
        </div>
        <div class="tab-pane fade"
             id="no_form_modules"
             role="tabpanel"
             aria-labelledby="no_form_modules">
          {% comment %} No Form Modules {% endcomment %}
          <h5 style="margin: 1em;">Select what you want to add to the project</h5>
          <div style="display: grid;
                      grid-template-columns: 1fr 1fr 1fr;
                      grid-gap: 1em;
                      padding: 0 1em">
            {% for module in no_form_modules %}
              <a href="{{ module.url | reset_breadcrumbs:False }}"
                 class="text-decoration-none p-3 border border-dark-subtle rounded">
                <i class="{{ module.icon }} fa-xl text-black pe-2 mt-2">
                </i>{{ module.name }}
              </a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}
{% block script %}
  {% include "core/base/tag_manager.html" %}
  {% comment %} potential js for dynamic forms {% endcomment %}
  {{ form_media }}
{% endblock script %}