{% extends "admin/base.html" %}
{% block title %}Profile · bragi admin{% endblock %}
{% block content %}
<h1>Profile</h1>
<p class="help">
  Your public author profile. The name and bio already appear on your posts;
  the rest feeds the h-card / structured data delivered with your content.
</p>

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

  <fieldset>
    <label for="display_name">Display name</label>
    <input type="text" name="display_name" id="display_name" required
           maxlength="255" value="{{ values.display_name }}">
  </fieldset>

  <fieldset>
    <label for="bio">Bio</label>
    {# Same rich editor as posts/pages, but with the image-library and
       internal-link pickers off: the bio is global (it renders on every
       site you publish), so there is no single site to scope those to.
       Bio is markdown; it is your public "about me" narrative. #}
    {% set editor_textarea_id = 'bio' %}
    {% set editor_enable_media = false %}
    {% set editor_enable_internal_links = false %}
    {% include "admin/_tiptap_editor.html" %}
    <textarea name="bio" id="bio" rows="8">{{ values.bio }}</textarea>
    <p class="help">
      Markdown. This is your public "about me" — it appears on your Profile
      page and under your posts.
    </p>
  </fieldset>

  <fieldset>
    <label for="pronouns">Pronouns</label>
    <input type="text" name="pronouns" id="pronouns" maxlength="64"
           placeholder="they/them" value="{{ values.pronouns }}">
  </fieldset>

  <fieldset>
    <label for="location">Location</label>
    <input type="text" name="location" id="location" maxlength="255"
           placeholder="Amsterdam, NL" value="{{ values.location }}">
  </fieldset>

  <fieldset>
    <label for="avatar_url">Avatar</label>
    <div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
      <img id="avatar-preview" alt="Avatar preview"
           style="width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: rgba(127,127,127,0.15);"
           src="{{ values.avatar_url }}"{% if not values.avatar_url %} hidden{% endif %}>
      <div style="flex: 1 1 16rem; min-width: 12rem;">
        <input type="url" name="avatar_url" id="avatar_url" maxlength="1024" style="width: 100%;"
               placeholder="https://example.com/me.jpg" value="{{ values.avatar_url }}"
               data-gravatar="{{ gravatar_url }}"
               {% if github_avatar_url %}data-github="{{ github_avatar_url }}"{% endif %}
               {% if avatar_error %}aria-invalid="true"{% endif %}>
        <p style="margin: 0.35rem 0 0;">
          <button type="button" id="use-gravatar" class="btn secondary">Use Gravatar</button>
          {% if github_avatar_url %}
          <button type="button" id="use-github" class="btn secondary">Use GitHub avatar</button>
          {% endif %}
        </p>
      </div>
    </div>
    {% if avatar_error %}<div class="inline-edit-error">{{ avatar_error }}</div>{% endif %}
    <p class="help">
      Paste an image URL, or use your Gravatar{% if github_avatar_url %} or GitHub avatar{% endif %}.
      Leave blank for no avatar.
    </p>
  </fieldset>

  <fieldset>
    <label>Profile links (rel="me")</label>
    <p class="help">
      Links to your own profiles (GitHub, Mastodon, LinkedIn, ...). Leave a
      row blank to remove it.
    </p>
    <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>
  </fieldset>

  <p><button type="submit">Save profile</button></p>
</form>

<script src="{{ url_for('admin_static.static', filename='account-profile.js') }}"></script>
{% endblock %}