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

{% 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
              <div class="extra">
                {% if account.status == DNAAccountStatuses.SUSPENDED %}
                  <img class="icon warning" src="{{ static_url_for('static', filename='img/icons/warning.svg') }}">
                  <span class="info warning">
                    Suspended on {{ account.expiration_date|strftime("%m/%d/%y") }}
                    {% if account.updated_at.date() < account.expiration_date %}
                      (Account Expired)
                    {% endif %}
                  </span>
                {% else %}
                  <span class="info"></span>
                {% endif %}
              </div>
            </h3>

          </div>
        </div>
        <div class="ui four wide column right aligned">
          {% if account.is_external and account.status in (DNAAccountStatuses.PENDING, DNAAccountStatuses.INVITED) %}
            <form action="{{ url_for('.send_invitation', account_id=account.id) }}" method="post" style="display: inline">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
              <button class="ui button pink tiny" id="send-invitation-button"><i class="envelope icon"></i>Send invitation</button>
            </form>
          {% endif %}
          {% if account.status in (DNAAccountStatuses.ACTIVE, DNAAccountStatuses.PENDING, DNAAccountStatuses.INVITED) %}
            <a href="{{ url_for('.edit', account_id=account.id) }}"
             class="ui button yellow tiny" id="edit-button"><img class="icon"
                                                src="{{ static_url_for('static', filename='img/icons/edit.svg') }}">Edit</a>
          {% elif account.status == DNAAccountStatuses.SUSPENDED %}
            <a href="{{ url_for('.edit', account_id=account.id) }}"
             class="ui button pink tiny"  id="edit-button"><i class="check icon"></i>Reactivate</a>
          {% endif %}
        </div>
      </div>
    </div>


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

        <div class="row">
          <div class="two wide column">
            <label>First Name</label>
          </div>
          <div class="four wide column">
            <div class="value"
                 id="account-detail-given-name">{{ account.given_name|default("N/A", True) }}</div>
          </div>
          <div class="two wide column">
            <label>Last Name</label>
          </div>
          <div class="four wide column">
            <div class="value"
                 id="account-detail-family-name">{{ account.family_name|default("N/A", True) }}</div>
          </div>
        </div>

        <div class="row">
          <div class="two wide column">
            <label>Email</label>
          </div>
          <div class="four wide column">
            <div class="value"
                 id="account-detail-email">{{ account.email|default("N/A", True) }}</div>
          </div>
          <div class="two wide column">
            <label>ID</label>
          </div>
          <div class="four wide column">
            <div class="value"
                 id="account-detail-sub">{{ account.sub|default("N/A", True) }}</div>
          </div>
        </div>
      </div>
    </div>

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

        <div class="row">
          <div class="two wide column">
            <label>Job Title</label>
          </div>
          <div class="four wide column">
            <div class="value" id="account-detail-job-title">{{ account.job_title|default("N/A", True) }}</div>
          </div>

          <div class="two wide column">
            <label>Job Category</label>
          </div>
          <div class="four wide column">
            <div class="value" id="account-detail-job-category">{{ account.job_category|default("N/A", True) }}
            </div>
          </div>

        </div>

        {% if account.is_sony_employee %}
          <div class="row">
            <div class="two wide column">
              <label>Business Unit</label>
            </div>
            <div class="four wide column">
              <div class="value" id="account-detail-business-unit">{{ account.business_unit|default("N/A", True) }}
              </div>
            </div>
            <div class="two wide column">
              <label>Location</label>
            </div>
            <div class="four wide column">
              <div class="value" id="account-detail-location">{{ account.location|default("N/A", True) }}</div>
            </div>

          </div>

          <div class="row">
            <div class="two wide column">
              <label>Personnel Type</label>
            </div>
            <div class="four wide column">
              <div class="value" id="account-detail-personnel-type">{{ account.personnel_type|default("N/A", True) }}
              </div>
            </div>
            <div class="two wide column">
              <label>Sony Username</label>
            </div>
            <div class="four wide column">
              <div class="value" id="account-detail-sony-username">{{ account.preferred_username|default("N/A", True) }}
              </div>
            </div>
          </div>
        {% endif %}

        <div class="row">
          <div class="two wide column">
            <label>Expiration Date</label>
          </div>
          <div class="four wide column">
            <div class="value" id="account-detail-expiration-date">{{ account.expiration_date|strftime("%m/%d/%y")|default("N/A", True) }}
            </div>
          </div>
        </div>

      </div>
    </div>

    {% if account.is_sony_employee %}

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

            <div class="row">
              <div class="two wide column">
                <label>Supervisor email</label>
              </div>
              <div class="four wide column">
                <div class="value" id="account-detail-supervisor-email">{{ account.supervisor_email|default("N/A", True) }}</div>
              </div>
              <div class="two wide column">
                <label>Supervisor name</label>
              </div>
              <div class="four wide column">
                <div class="value" id="account-detail-supervisor-name">{{ account.supervisor_name|default("N/A", True) }}</div>
              </div>
            </div>

        </div>
      </div>

    {% endif %}

    <div class="ui segment details account-details">
      <div class="ui grid">
        <div class="row">
          <div class="two wide column">
            <label>Tags</label>
          </div>
          <div class="ten wide column">
            <div class="value" id="account-detail-sony-username">
              {% for tag in account.tags %}
                {{ tag.name }}{% if not loop.last %}, {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>

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

        <div class="row">
          {{ fields.local_date_info_field(account.created_at, "Created", "account-detail-created") }}
          {{ fields.local_date_info_field(account.updated_at, "Last modified", "account-detail-last-modified") }}
        </div>

      </div>
    </div>

    <div class="ui segment no-padding transparent">
      <div class="ui grid middle aligned">
        <div class="ui eight wide column">
        </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>

  </section>
{% endblock %}