{% extends "frontend/base.html" %}
{% load i18n static %}
{% load partials %}
{% block html_title %}
    {% block page_title %}
        {% translate "Profile" %}
    {% endblock page_title %}
{% endblock html_title %}
{% block card_header %}
    <div class="card-header">
        <h4 class="card-title">{% translate "Account" %}</h4>
    </div>
{% endblock %}
{% partialdef user-email %}
<td>
    {{ request.user.email }}
    <button class="btn btn-primary"
            hx-get="{% url 'frontend:profile' %}?fragment=user-email-edit&hx-single-field=email"
            hx-target="closest td"
            hx-swap="outerHTML">{% translate "Edit" %}</button>
</td>
{% endpartialdef user-email %}
{% partialdef user-company %}
<td>
    {{ request.user.company|default:"–" }}
    <button class="btn btn-primary"
            hx-get="{% url 'frontend:profile' %}?fragment=user-company-edit&hx-single-field=company"
            hx-target="closest td"
            hx-swap="outerHTML">{% translate "Edit" %}</button>
</td>
{% endpartialdef user-company %}
{% partialdef user-email-edit %}
<td>
    <form hx-target="closest td"
          hx-swap="outerHTML"
          hx-post="{{ request.url }}">
        <div class="d-flex align-items-baseline">
            {{ form.email.as_field_group }}
            <input type="hidden" name="hx-single-field" value="email">
            <input type="hidden" name="fragment" value="user-email">
            <button type="submit" class="btn btn-primary mx-1">{% translate "Save" %}</button>
            <button type="button"
                    class="btn btn-secondary"
                    hx-get="{{ request.path }}?fragment=user-email"
                    hx-target="closest td"
                    hx-swap="outerHTML">{% translate "Cancel" %}</button>
        </div>
    </form>
</td>
{% endpartialdef %}
{% partialdef user-company-edit %}
<td>
    <form hx-target="closest td"
          hx-swap="outerHTML"
          hx-post="{{ request.url }}">
        <div class="d-flex align-items-baseline">
            {{ form.company.as_field_group }}
            <input type="hidden" name="hx-single-field" value="company">
            <input type="hidden" name="fragment" value="user-company">
            <button type="submit" class="btn mx-1 btn-primary">{% translate "Save" %}</button>
            <button type="button"
                    class="btn btn-secondary"
                    hx-get="{{ request.path }}?fragment=user-company"
                    hx-target="closest td"
                    hx-swap="outerHTML">{% translate "Cancel" %}</button>
        </div>
    </form>
</td>
{% endpartialdef %}
{% block content %}
    <section>
        <div class="row match-height">
            <div class="col-md-6 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="">{% translate "Profile" %}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-lg">
                                    <tbody>
                                        <tr>
                                            <th class="w-25">{% translate "Name" %}</th>
                                            <td>{{ request.user.first_name }} {{ request.user.last_name }}</td>
                                        </tr>
                                        <tr>
                                            <th class="w-25">
                                                <span class="d-flex mt-2">{% translate "E-mail" %}</span>
                                            </th>
                                            {% partial user-email %}
                                        </tr>
                                        <tr>
                                            <th class="w-25">
                                                <span class="d-flex mt-2">{% translate "Company" %}</span>
                                            </th>
                                            {% partial user-company %}
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="">{% translate "Account" %}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <p>
                                {% blocktranslate trimmed %}
                                    You are logged in with your VSHN user account. Change your password and other account data here:
                                {% endblocktranslate %}
                            </p>
                            <div>
                                <a href="{{ account_href }}"
                                   target="_blank"
                                   class="btn btn-primary btn-lg icon icon-left btn-keycloak">
                                    <span class="mx-1">{% translate "VSHN Account Console" %}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {% endblock content %}
