{% extends "base.html" %}

{% block content %}
  <div class="row g-4">
    <div class="col-12 col-lg-3">
      <div class="card shadow-sm mb-3">
        {% if surface == "profile_user" or surface == "profile_team" or surface == "profile_personal_repo" or surface == "profile_team_repo" %}
          {% set profile_nav_active = "skills" if surface == "profile_user" else ("teams" if surface == "profile_team" or surface == "profile_team_repo" else "repos") %}
          {% include "partials/profile_sidebar.html" %}
        {% else %}
          {% set staff_nav_active = "users" if surface == "staff_user" else ("teams" if surface == "staff_team" else "repos") %}
          {% include "partials/staff_sidebar.html" %}
        {% endif %}
      </div>
    </div>
    <div class="col-12 col-lg-9">
      {% if surface == "profile_user" %}
        {% set breadcrumbs = [
          {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
          {"name": "Skills"}
        ] %}
      {% elif surface == "profile_team" %}
        {% set breadcrumbs = [
          {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
          {"name": "Teams", "href": "/profile/teams"},
          {"name": team.name, "href": "/profile/teams/" ~ team.uuid},
          {"name": "Skills"}
        ] %}
      {% elif surface == "profile_personal_repo" %}
        {% set breadcrumbs = [
          {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
          {"name": "Repos", "href": "/profile/repos"},
          {"name": repo.name, "href": "/profile/repos/" ~ repo.uuid},
          {"name": "Skills"}
        ] %}
      {% elif surface == "profile_team_repo" %}
        {% set breadcrumbs = [
          {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
          {"name": "Teams", "href": "/profile/teams"},
          {"name": team.name, "href": "/profile/teams/" ~ team.uuid},
          {"name": repo.name, "href": "/profile/teams/" ~ team.uuid ~ "/repos/" ~ repo.uuid},
          {"name": "Skills"}
        ] %}
      {% elif surface == "staff_user" %}
        {% set breadcrumbs = [
          {"name": "Staff", "href": "/staff"},
          {"name": "Users", "href": "/staff/users"},
          {"name": user.name | display_name(user.username), "href": "/staff/users/" ~ user.uuid},
          {"name": "Skills"}
        ] %}
      {% elif surface == "staff_team" %}
        {% set breadcrumbs = [
          {"name": "Staff", "href": "/staff"},
          {"name": "Teams", "href": "/staff/teams"},
          {"name": team.name, "href": "/staff/teams/" ~ team.uuid},
          {"name": "Skills"}
        ] %}
      {% else %}
        {% set breadcrumbs = [
          {"name": "Staff", "href": "/staff"},
          {"name": "Repos", "href": "/staff/repos"},
          {"name": repo.name, "href": "/staff/repos/" ~ repo.uuid},
          {"name": "Skills"}
        ] %}
      {% endif %}
      {% include "partials/breadcrumbs.html" %}

      {% if surface == "profile_team" %}
        {% with profile_team_tabs_active="skills", can_manage_timers=can_manage %}
          {% include "profile/team_tabs.html" %}
        {% endwith %}
      {% elif surface == "profile_personal_repo" %}
        {% set profile_repo_subnav_active = "skills" %}
        {% include "profile/personal_repo_subnav.html" %}
      {% elif surface == "profile_team_repo" %}
        {% set profile_repo_subnav_active = "skills" %}
        {% include "profile/team_repo_subnav.html" %}
      {% elif surface == "staff_user" %}
        {% with staff_user_tabs_base="/staff/users/" ~ user.uuid, staff_user_tabs_active="skills" %}
          {% include "partials/staff_user_tabs.html" %}
        {% endwith %}
      {% elif surface == "staff_team" %}
        {% with team_tabs_base="/staff/teams/" ~ team.uuid, team_tabs_active="skills" %}
          {% include "partials/team_tabs.html" %}
        {% endwith %}
      {% elif surface == "staff_repo" %}
        {% set staff_repo_subnav_active = "skills" %}
        {% include "staff/repo_subnav.html" %}
      {% endif %}

      {% if notice %}<div class="alert alert-success">{{ notice }}</div>{% endif %}
      {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}

      {% if mode == "list" %}
        <form id="skill-filters" method="get" action="{{ base_url }}"></form>
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <div>
            <h1 class="h3 mb-1">Skills</h1>
            <p class="text-muted mb-0">Stored instruction documents available in this scope.</p>
          </div>
          {% if can_manage %}<a class="btn btn-primary" href="{{ base_url }}/new">Create skill</a>{% endif %}
        </div>
        <div class="card shadow-sm">
          <div class="card-body p-0">
            {% if page.results | length == 0 %}
              <p class="text-muted m-3">No skills yet.</p>
            {% else %}
              <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                  <thead class="table-light">
                    <tr class="text-uppercase small text-muted">
                      <th>Name</th>
                      <th>Description</th>
                      <th>Updated</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for item in page.results %}
                      <tr>
                        <td><a class="fw-semibold text-decoration-none" href="{{ base_url }}/{{ item.uuid }}"><code>{{ item.slug }}</code></a></td>
                        <td>{{ item.description }}</td>
                        <td class="text-nowrap" title="{{ item.updated_at }}">{{ item.updated_at | humantime }}</td>
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% endif %}
          </div>
          {% with page=page, query=query, per_page_id="skills-per-page", per_page_form="skill-filters" %}
            {% include "partials/paging_footer.html" %}
          {% endwith %}
        </div>
      {% else %}
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <div>
            <h1 class="h3 mb-1">{% if mode == "new" %}Create skill{% else %}Edit skill{% endif %}</h1>
            <p class="text-muted mb-0">Metadata and instructions are serialized as one canonical <code>SKILL.md</code>.</p>
          </div>
          <a class="btn btn-outline-secondary" href="{{ base_url }}">Back to skills</a>
        </div>
        <div class="row g-3 align-items-start">
          <div class="col-12 col-xl-7">
            <div class="card shadow-sm">
              <div class="card-body">
                <form id="skill-form" method="post" action="{{ action_url }}">
                  <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
                  <div class="mb-3">
                    <label class="form-label" for="skill-name">Name</label>
                    <input class="form-control font-monospace" id="skill-name" name="name" value="{{ form.name }}" maxlength="64" pattern="[a-z0-9]+(-[a-z0-9]+)*"{% if not can_manage %} readonly{% endif %} required>
                    <div class="form-text">1-64 lowercase letters, numbers, and single hyphens.</div>
                  </div>
                  <div class="mb-3">
                    <label class="form-label" for="skill-description">Description</label>
                    <textarea class="form-control" id="skill-description" name="description" rows="3" maxlength="1024"{% if not can_manage %} readonly{% endif %} required>{{ form.description }}</textarea>
                  </div>
                  <div class="mb-3">
                    <label class="form-label" for="skill-instructions">Instructions</label>
                    <textarea class="form-control font-monospace" id="skill-instructions" name="instructions" rows="16"{% if not can_manage %} readonly{% endif %}>{{ form.instructions }}</textarea>
                    <div class="form-text">The complete canonical document may be at most 262,144 bytes.</div>
                  </div>
                  {% if can_manage %}
                    <div class="d-flex flex-wrap gap-2">
                      <button class="btn btn-primary" type="submit">{% if mode == "new" %}Create skill{% else %}Save skill{% endif %}</button>
                      <a class="btn btn-outline-secondary" href="{{ base_url }}">Cancel</a>
                    </div>
                  {% endif %}
                </form>
              </div>
            </div>
            {% if mode == "edit" and can_manage %}
              <div class="card border-danger mt-3">
                <div class="card-body">
                  <h2 class="h6 text-danger">Delete skill</h2>
                  <p class="text-muted">Deletion is permanent. The stored document will no longer be addressable.</p>
                  <form method="post" action="{{ base_url }}/{{ skill.uuid }}/delete" data-confirm-modal="confirm-delete-skill" data-confirm-name="{{ skill.slug }}">
                    <input type="hidden" name="csrf_token" value="{{ form.csrf_token }}">
                    <button class="btn btn-outline-danger" type="submit">Delete skill</button>
                  </form>
                </div>
              </div>
            {% endif %}
          </div>
          <div class="col-12 col-xl-5">
            <div class="card shadow-sm sticky-xl-top pearing-skill-preview-panel">
              <div class="card-body">
                <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
                  <div class="text-uppercase text-muted small fw-semibold">Canonical SKILL.md</div>
                  <button class="btn btn-sm btn-outline-secondary" id="download-skill-document" type="button">Download</button>
                </div>
                <pre class="bg-body-tertiary border rounded p-3 mb-0 overflow-auto pearing-skill-document-preview" id="skill-document-preview"></pre>
              </div>
            </div>
          </div>
        </div>
        {% if mode == "edit" %}
          {% with
            modal_id="confirm-delete-skill",
            modal_title="Delete skill",
            modal_body='Delete <code data-confirm-name></code>?',
            modal_confirm_text="Delete skill",
            modal_desc="This permanently removes the stored skill document."
          %}
            {% include "partials/confirm_modal.html" %}
          {% endwith %}
        {% endif %}
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block scripts %}
  {% if mode != "list" %}
    <script>
      (function () {
        var $name = $("#skill-name");
        var $description = $("#skill-description");
        var $instructions = $("#skill-instructions");
        var $preview = $("#skill-document-preview");
        var $download = $("#download-skill-document");
        if (!$name.length || !$description.length || !$instructions.length || !$preview.length || !$download.length) return;

        function content() {
          return "---\nname: " + $name.val().trim() + "\ndescription: " + JSON.stringify($description.val().trim()) + "\n---\n\n" + $instructions.val().replace(/\r\n?/g, "\n");
        }
        function updatePreview() { $preview.text(content()); }
        $name.add($description).add($instructions).on("input", updatePreview);
        $download.on("click", function () {
          var url = URL.createObjectURL(new Blob([content()], { type: "text/markdown;charset=utf-8" }));
          var $link = $("<a>", { href: url, download: "SKILL.md" });
          $link[0].click();
          URL.revokeObjectURL(url);
        });
        updatePreview();
      })();
    </script>
  {% endif %}
{% endblock %}