{%- extends "core/base.jinja" -%}

{%- block title -%}
  {%- trans -%}Edit user{%- endtrans -%}
{%- endblock -%}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('user/user_edit.scss') }}">
{%- endblock -%}

{% block additional_js %}
  <script defer src="{{ static("user/js/user_edit.js") }}"></script>
{% endblock %}

{% macro profile_picture(field_name) %}
  {% set this_picture = form.instance[field_name] %}
  <div class="profile-picture" x-data="camera_{{ field_name }}" >
    <div class="profile-picture-display" :aria-busy="loading" :class="{ 'camera-error': isCameraError }">
      <img
        x-show="!isCameraEnabled && !isCameraError"
        :src="getPicture()"
        alt="{%- trans -%}Profile{%- endtrans -%}" title="{%- trans -%}Profile{%- endtrans -%}"
        loading="lazy"
      />
      <video
        x-show="isCameraEnabled"
        x-ref="video"
      ></video>
      <i
        x-show="isCameraError"
        x-cloak
        class="fa fa-eye-slash"
      ></i>
    </div>
    <div class="profile-picture-buttons" x-show="canEditPicture">
      <button
        x-show="canEditPicture && !isCameraEnabled"
        class="btn btn-blue"
        @click.prevent="enableCamera()"
      >
        <i class="fa fa-camera"></i>
        {% trans %}Enable camera{% endtrans %}
      </button>
      <button
        x-show="isCameraEnabled"
        class="btn btn-blue"
        @click.prevent="takePicture()"
      >
        <i class="fa fa-camera"></i>
        {% trans %}Take a picture{% endtrans %}
      </button>
    </div>
    <div x-ref="form" class="profile-picture-edit">
      {%- if form[field_name] -%}
        <div>
          {{ form[field_name] }}
          <button class="btn btn-red" @click.prevent="deletePicture()"
                  {%- if not (this_picture and this_picture.is_owned_by(user)) -%}
                    :disabled="!picture"
                  {%- endif -%}
                  x-cloak
          >
            {%- trans -%}Delete{%- endtrans -%}
          </button>
        </div>
        {{ form[field_name].label_tag() }}
        {{ form[field_name].errors }}
      {%- else -%}
        <em>{% trans %}To edit your profile picture, ask a member of the AE{% endtrans %}</em>
      {%- endif -%}
    </div>
  </div>
  <script>
    {%- if this_picture -%}
      {% set default_picture = this_picture.get_download_url()|tojson %}
      {% set delete_url = (
        url('core:file_delete', file_id=this_picture.id)
        + "?next=" + url('core:user_edit', user_id=profile.id)
      )|tojson %}
    {%- else -%}
      {% set default_picture = static('core/img/unknown.jpg')|tojson %}
      {% set delete_url = "null" %}
    {%- endif -%}
    document.addEventListener("alpine:init", () => {
      Alpine.data(
        "camera_{{ field_name }}",
        alpineWebcamBuilder(
          {{ default_picture }},
          {{ delete_url }},
          {{ (this_picture and this_picture.is_owned_by(user))|tojson }}
        )
      );
    });
  </script>
{% endmacro %}

{%- block content -%}
  <h2 class="title">{%- trans -%}Edit user profile{%- endtrans -%}</h2>
  <form action="" method="post" enctype="multipart/form-data" id="user_edit">

    {%- csrf_token -%}
    {{ form.non_field_errors() }}

    {# User Pictures #}
    <div class="profile-pictures">

      {{ profile_picture("profile_pict") }}

      {{ profile_picture("avatar_pict") }}

      {{ profile_picture("scrub_pict") }}

    </div>


    {# All fields #}
    <div class="fields-centered">
      {%- for field in form -%}
        {%- if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_viewable","forum_signature"] -%}
          {%- continue -%}
        {%- endif -%}

        <div class="profile-field">
          {{ field.label_tag() }}
          <div class="profile-field-content">
            {{ field }}
            {%- if field.errors -%}
              <div class="field-error">{{ field.errors }}</div>
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>

    {# Textareas #}
    <div class="fields-centered">
      {%- for field in [form.quote, form.forum_signature] -%}
        <div class="profile-field">
          {{ field.label_tag() }}
          <div class="profile-field-content">
            {{ field }}
            {%- if field.errors -%}
              <div class="field-error">{{ field.errors }}</div>
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>

    {# Checkboxes #}
    <div class="profile-visible">
      <div class="row">
        {{ form.is_viewable }}
        {{ form.is_viewable.label_tag() }}
      </div>
      <span class="helptext">
        {{ form.is_viewable.help_text }}
      </span>
    </div>
    <div class="final-actions">

      {%- if form.instance == user -%}
        <p>
          <a href="{{ url('core:password_change') }}">{%- trans -%}Change my password{%- endtrans -%}</a>
        </p>
      {%- elif user.is_root -%}
        <p>
          <a href="{{ url('core:password_root_change', user_id=form.instance.id) }}">
            {%- trans -%}Change user password{%- endtrans -%}
          </a>
        </p>
      {%- endif -%}

      <p>
        <input type="submit" value="{%- trans -%}Update{%- endtrans -%}" />
      </p>
    </div>
  </form>

  <p>
    <em>{%- trans -%}Username: {%- endtrans -%}&nbsp;{{ form.instance.username }}</em>
    <br />
    {%- if form.instance.customer -%}
      <em>{%- trans -%}Account number: {%- endtrans -%}&nbsp;{{ form.instance.customer.account_id }}</em>
    {%- endif -%}
  </p>

{%- endblock -%}