{% extends "full_layout.html" %}
{% import "macros/status.html" as status_macros %}
{% import "macros/fields.html" as fields %}


{% block title %}{{ account.name }}{% endblock %}

{% block subnav_header %}
  {% include "dna_accounts/components/account_details_subnav.html" %}
{% endblock %}

{% block subnav_items %}
  <div class="item active">
    <a href="{{ url_for('.show', account_id=account.id) }}">
      Details
    </a>
  </div>
  <div class="item">
    <a href="{{ url_for('.products', account_id=account.id) }}">
      Products
    </a>
  </div>
{% endblock %}

{% block content %}
  <section>

    <div class="ui segment no-padding transparent">
      <div class="ui grid middle aligned">
        <div class="ui eight wide column">
          <div class="details-header-with-extra">
            <h3>
              User Details
            </h3>
          </div>
        </div>
        <div class="ui four wide column right aligned">
          {% if account.usm_account %}
            <div class="header-label-with-icon">
              Connected to USM
              <img src="{{ static_url_for("static", filename="img/icons/check.svg") }}">
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <form method="POST" id="account-editing-form">
      {{ form.csrf_token }}

      <div class="ui segment details account-details">
        <div class="ui grid">

          <div class="row">
            {% if account.usm_account %}
              {{ fields.form_readonly_field(account.given_name, "First Name", "given_name") }}
              {{ fields.form_readonly_field(account.family_name, "Last Name", "family_name") }}
            {% else %}
              {{ fields.form_field(form.given_name) }}
              {{ fields.form_field(form.family_name) }}
            {% endif %}
          </div>

          <div class="row">
            {% if account.usm_account %}
              {{ fields.form_readonly_field(account.email, "Email", "email") }}
            {% else %}
              {{ fields.form_field(form.email, False) }}
            {% endif %}
            {{ fields.form_readonly_field(account.sub, "ID", "sub") }}
          </div>
        </div>
      </div>

      <div class="ui segment details account-details">
        <div class="ui grid">

          <div class="row">
            {{ fields.form_field(form.is_sony_employee, False, "yes-no") }}
            {{ fields.form_field(form.is_vip, False, "yes-no") }}
          </div>
        </div>

      </div>

      <div class="ui segment details account-details">

        <div class="ui grid">

          <div class="row" >
            {% if account.usm_account %}
              {{ fields.form_readonly_field(account.job_title, "Job Title", "job-title") }}
            {% else %}
              {{ fields.form_field(form.job_title) }}
            {% endif %}
            {{ fields.form_field(form.job_category) }}
          </div>

          <div class="row sony-employee-fields">
            {{ fields.form_field(form.business_unit) }}
            {% if account.usm_account %}
              {{ fields.form_readonly_field(account.location, "Location", "location") }}
            {% else %}
              {{ fields.form_field(form.location) }}
            {% endif %}
          </div>

          <div class="row sony-employee-fields">
            {{ fields.form_field(form.personnel_type) }}
            {% if account.usm_account %}
              {{ fields.form_readonly_field(account.preferred_username, "Sony Username", "sony-username") }}
            {% else %}
              {{ fields.form_field(form.preferred_username) }}
            {% endif %}
          </div>

          <div class="row">
            {{ fields.form_field(form.expiration_date, False, "date-input") }}
            {% if form.no_mfa_fields_are_available %}
              {{ fields.form_field(form.no_mfa, False, "yes-no") }}
            {% endif %}
          </div>

        </div>
      </div>

      <div class="ui segment details account-details sony-employee-fields">

        <div class="ui grid">
          <div class="row">
            {{ fields.form_field(form.supervisor_email, False, "search") }}
            {{ fields.form_readonly_field(form.supervisor_name.object_data|default('', True), "Supervisor Name", "supervisor_name_readonly") }}
            {{ form.supervisor_name }}
          </div>

        </div>
      </div>

      <div class="ui segment details account-details">

        <div class="ui grid">
          <div class="row">
            {{ fields.form_field(form.tags, True, "ui search dropdown") }}
          </div>
        </div>
      </div>


      <div class="ui grid">
        <div class="two wide column">
          {% if account.status != statuses.SUSPENDED %}
            <button class="ui tiny button suspend-button"
                    data-confirmation-message="Are You sure want to suspend this user?"
                    type="submit" name="action"
                    value="{{ form.Actions.SUSPEND.name }}">
              <img class="icon" src="{{ static_url_for("static", filename="img/icons/status-suspended.svg") }}">{{ form.Actions.SUSPEND.value }}
            </button>
          {% endif %}
        </div>
        <div class="ten wide column right aligned">
          <a class="ui tiny button" href="{{ url_for('.show', account_id=account.id) }}">Cancel</a>
          <button class="ui pink tiny button" type="submit" name="action" value="{{ form.Actions.SAVE.name }}">{{ form.Actions.SAVE.value }}</button>
        </div>
      </div>

    </form>
  </section>
{% endblock %}

{% include "components/confirmation-modal.html" %}

{% block js %}
  {{ super() }}
  <script src="{{ static_url_for("static", filename="js/edit-dna-account.js") }}"></script>
{% endblock %}