{% extends 'generic/_base.html' %}
{% load i18n %}

{% block title %}
  {% trans 'Device Library Settings' %}
{% endblock %}

{% block content %}
  <form method="post" class="object-edit mt-5" id="library-sources-form">
    {% csrf_token %}
    {{ formset.management_form }}

    {% if formset.non_form_errors %}
      <div class="alert alert-danger">{{ formset.non_form_errors }}</div>
    {% endif %}

    <div class="field-group">
      <div class="row">
        <h2 class="col-9">{% trans 'Library Sources' %}</h2>
      </div>
      <div class="row mb-3">
        <div class="col-9 text-muted">
          {% trans 'Add the <b><u>GitHub</u></b> repositories that this plugin should use when importing device definitions.' %}
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-9" id="library-source-forms">
          {% for form in formset %}
            <div class="input-group mb-2 library-source-form">
              {% for hidden in form.hidden_fields %}
                {{ hidden }}
              {% endfor %}
              {{ form.repository }}
              <button type="button" class="btn btn-outline-danger remove-library-source" aria-label="{% trans 'Delete library' %}" title="{% trans 'Delete library' %}" data-delete-label="{% trans 'Delete library' %}" data-undo-label="{% trans 'Undo deletion' %}"><span class="mdi mdi-trash-can-outline" aria-hidden="true"></span></button>
              <span class="d-none">{{ form.DELETE }}</span>
              {% if form.repository.errors %}
                <div class="invalid-feedback d-block">{{ form.repository.errors.0 }}</div>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      </div>
      <div class="row">
        <div class="col-9">
          <div class="btn-list">
            <button type="submit" class="btn btn-primary">{% trans 'Save' %}</button>
            <button type="button" class="btn btn-outline-primary" id="add-library-source">
              <span class="mdi mdi-plus-thick" aria-hidden="true"></span>
              {% trans 'Add Library' %}
            </button>
            {% if has_library_sources %}
              <button
                type="button"
                class="btn btn-outline-success"
                id="sync-all-libraries"
                data-sync-url="{% url 'plugins:netbox_plugin_device_library:sync_all' %}"
                onclick="syncAllLibraries()"
                {% if sync_running %}disabled aria-disabled="true"{% endif %}
              >
                <span class="mdi mdi-sync" aria-hidden="true"></span>
                {% trans 'Sync All Libraries' %}
              </button>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </form>

  <template id="library-source-empty-form">
    <div class="input-group mb-2 library-source-form">
      {% for hidden in formset.empty_form.hidden_fields %}
        {{ hidden }}
      {% endfor %}
      {{ formset.empty_form.repository }}
      <button type="button" class="btn btn-outline-danger remove-library-source" aria-label="{% trans 'Delete library' %}" title="{% trans 'Delete library' %}" data-delete-label="{% trans 'Delete library' %}" data-undo-label="{% trans 'Undo deletion' %}"><span class="mdi mdi-trash-can-outline" aria-hidden="true"></span></button>
      <span class="d-none">{{ formset.empty_form.DELETE }}</span>
    </div>
  </template>
{% endblock %}

{% block javascript %}
  {{ block.super }}
  <script>
    const sourceForms = document.getElementById('library-source-forms')
    const totalForms = document.getElementById('id_form-TOTAL_FORMS')
    const emptyForm = document.getElementById('library-source-empty-form')
    const syncButton = document.getElementById('sync-all-libraries')
    const githubRepositoryPattern = /^https:\/\/github\.com\/[A-Za-z0-9][A-Za-z0-9-]{0,38}\/[A-Za-z0-9._-]+(?:\.git)?\/?$/i

    async function syncAllLibraries() {
      if (syncButton.disabled) return

      syncButton.disabled = true
      syncButton.setAttribute('aria-disabled', 'true')
      try {
        const response = await fetch(syncButton.dataset.syncUrl, {
          method: 'POST',
          headers: {
            'X-CSRFToken': document.querySelector('#library-sources-form input[name="csrfmiddlewaretoken"]').value,
          },
          credentials: 'same-origin',
        })
        if (!response.ok) throw new Error('Unable to queue the device library synchronization.')

        window.location.reload()
      } catch (error) {
        syncButton.disabled = false
        syncButton.setAttribute('aria-disabled', 'false')
        window.alert(error.message)
      }
    }
    
    function validateRepository(input) {
      const isMarkedForDeletion = input.closest('.library-source-form')?.querySelector('input[name$="-DELETE"]')?.checked
      const isValid = isMarkedForDeletion || !input.value || githubRepositoryPattern.test(input.value.trim())
      input.setCustomValidity(isValid ? '' : 'Enter an HTTPS GitHub repository URL, for example https://github.com/user/repository.')
      input.classList.toggle('is-invalid', !isValid)
      return isValid
    }
    
    document.getElementById('add-library-source').addEventListener('click', () => {
      const index = totalForms.value
      const form = emptyForm.content.cloneNode(true)
      form.querySelectorAll('[name], [id], label').forEach((element) => {
        if (element.name) element.name = element.name.replace('__prefix__', index)
        if (element.id) element.id = element.id.replace('__prefix__', index)
        if (element.htmlFor) element.htmlFor = element.htmlFor.replace('__prefix__', index)
      })
      sourceForms.appendChild(form)
      totalForms.value = Number(index) + 1
    })
    
    sourceForms.addEventListener('click', (event) => {
      const removeButton = event.target.closest('.remove-library-source')
      if (!removeButton) return
      event.preventDefault()
      const form = removeButton.closest('.library-source-form')
      const deleteInput = form.querySelector('input[name$="-DELETE"]')
      const repositoryInput = form.querySelector('input[name$="-repository"]')
      const icon = removeButton.querySelector('.mdi')
      if (!deleteInput || !repositoryInput || !icon) return
    
      const isDeleted = !deleteInput.checked
      deleteInput.checked = isDeleted
      deleteInput.value = isDeleted ? 'on' : ''
      repositoryInput.disabled = isDeleted
      form.classList.toggle('library-source-pending-delete', isDeleted)
      removeButton.classList.toggle('btn-outline-danger', !isDeleted)
      removeButton.classList.toggle('btn-outline-secondary', isDeleted)
      removeButton.setAttribute('aria-pressed', isDeleted)
      removeButton.setAttribute('aria-label', isDeleted ? removeButton.dataset.undoLabel : removeButton.dataset.deleteLabel)
      removeButton.setAttribute('title', isDeleted ? removeButton.dataset.undoLabel : removeButton.dataset.deleteLabel)
      icon.classList.toggle('mdi-trash-can-outline', !isDeleted)
      icon.classList.toggle('mdi-undo', isDeleted)
    
      validateRepository(repositoryInput)
    })
    
    sourceForms.addEventListener('input', (event) => {
      if (event.target.matches('input[name$="-repository"]')) {
        validateRepository(event.target)
      }
    })

  </script>
{% endblock %}

{% block head %}
  {{ block.super }}
  <style>
    .library-source-pending-delete input[name$='-repository'] {
      text-decoration: line-through;
    }
  </style>
{% endblock %}