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

SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load static %}
{% block title %}
  User Profile
{% endblock title %}
{% block content %}
  <div class="row">
    <div class="col">
      <h3>User Profile</h3>
      <table class="table" itemscope itemtype="https://schema.org/Person">
        <tbody>
          <tr>
            <th scope="row">Username</th>
            <td>{{ user.username }}</td>
          </tr>
          <tr>
            <th scope="row">Given Name</th>
            <td itemprop="givenName">{{ user.first_name }}</td>
          </tr>
          <tr>
            <th scope="row">Surname</th>
            <td itemprop="familyName">{{ user.last_name }}</td>
          </tr>
          <tr>
            <th scope="row">Display Name</th>
            <td>{{ user.heliportuser.display_name }}</td>
          </tr>
          <tr>
            <th scope="row">E-Mail</th>
            <td itemprop="email">{{ user.email }}</td>
          </tr>
          <tr>
            <th scope="row" class="align-middle">ORCID</th>
            <td class="align-middle">
              <div id="current-orcid">
                {% if heliport_user.orcid %}
                  <a itemprop="sameAs"
                     content="{{ heliport_user.orcid }}"
                     href="{{ heliport_user.orcid }}"
                     rel="me noopener noreferrer">
                    <i class="fa-brands fa-orcid"></i> {{ heliport_user.orcid }}
                  </a>
                {% endif %}
                {# djlint: off #}
                <button id="edit_button"
                        type="button"
                        class="btn btn-primary btn-sm"
                        _="on click toggle .d-none on <#orcid-form, #current-orcid/>">Edit</button>
                {# djlint: on #}
              </div>
              <form id="orcid-form" class="d-none" method="post">
                {% csrf_token %}
                <div class="input-group">
                  <input name="orcid"
                         class="form-control form-control-sm"
                         value="{{ heliport_user.orcid | default:'' }}" />
                  <button type="submit" class="btn btn-primary btn-sm">Save</button>
                  {# djlint: off #}
                  <button type="button"
                          class="btn btn-secondary btn-sm"
                          _="on click toggle .d-none on <#orcid-form, #current-orcid/>">Cancel</button>
                  {# djlint: on #}
                </div>
              </form>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br />
{% endblock content %}
{% block script %}
{% endblock script %}