{% extends "admin/base.html" %}
{% block title %}Profile links · bragi admin{% endblock %}
{% block content %}
<h1>Profile links</h1>
<p class="help">
  Links to your own profiles (GitHub, Mastodon, LinkedIn, ...). They
  render in the site footer as <code>rel="me"</code> links, which also
  lets Mastodon verify your profile. Leave a row blank to remove it.
</p>

<form method="post"
      action="{{ url_for('profile_links_admin.edit', site_slug=site_slug) }}">
  <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">

  <table class="profile-links-edit" id="profile-links-rows">
    <thead>
      <tr><th>Label</th><th>URL</th><th></th></tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr class="profile-links-edit__row">
        <td>
          <input type="text" name="profile_label" value="{{ row.label }}"
                 placeholder="GitHub" autocomplete="off">
        </td>
        <td>
          <input type="url" name="profile_url" value="{{ row.url }}"
                 placeholder="https://github.com/you" autocomplete="off"
                 {% if row.error %}aria-invalid="true"{% endif %}>
          {% if row.error %}
          <div class="inline-edit-error">{{ row.error }}</div>
          {% endif %}
        </td>
        <td>
          <button type="button" class="profile-links-edit__remove"
                  aria-label="Remove row">&times;</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <p>
    <button type="button" id="profile-links-add">+ Add link</button>
  </p>
  <p>
    <button type="submit">Save profile links</button>
  </p>
</form>

<script>
  /* Admin is JS-required (see CONTEXT.md "Per-side JS posture").
     "Add link" clones the last row blank; "Remove" deletes its row,
     keeping at least one so there's always something to type into.
     Submit drops fully-blank rows server-side, so an unused trailing
     row is harmless. */
  (function () {
    'use strict';
    var tbody = document.querySelector('#profile-links-rows tbody');
    var addBtn = document.getElementById('profile-links-add');

    function blankRow() {
      var rows = tbody.querySelectorAll('.profile-links-edit__row');
      var clone = rows[rows.length - 1].cloneNode(true);
      clone.querySelectorAll('input').forEach(function (i) {
        i.value = '';
        i.removeAttribute('aria-invalid');
      });
      var err = clone.querySelector('.inline-edit-error');
      if (err) err.remove();
      return clone;
    }

    addBtn.addEventListener('click', function () {
      tbody.appendChild(blankRow());
    });

    tbody.addEventListener('click', function (ev) {
      if (!ev.target.classList.contains('profile-links-edit__remove')) return;
      var rows = tbody.querySelectorAll('.profile-links-edit__row');
      if (rows.length <= 1) {
        var only = rows[0];
        only.querySelectorAll('input').forEach(function (i) { i.value = ''; });
      } else {
        ev.target.closest('.profile-links-edit__row').remove();
      }
    });
  })();
</script>
{% endblock %}