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

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

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

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

{% block left_sidebar %}
  {% include "components/products_menu.html" %}
{% endblock %}

{% block content %}
  <section>
    <div class="ui segment no-padding transparent">
      <div class="ui grid middle aligned details-header-grid">
        <div class="ui six wide column">
          <div class="details-header-with-extra">
            <h3>
              {{ product.name }}
            </h3>
          </div>
        </div>
        <div class="ui six wide column right aligned">
        </div>
      </div>
    </div>

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

      <div class="ui segment details product-details">
        <div class="ui grid">
          <div class="row">
            {% set ns = namespace(counter=0) %}
            {%  for field in form.claim_fields %}
              {% if ns.counter == 2 or field.widget.multiple %}
                {% set ns.counter = 0 %}
                </div>
                <div class="row">
              {% endif %}
              {% if field.claim_name.parent or field.claim_name.claim_values_source.parent %}
                {{ fields.form_field(field, field.widget.multiple, "dropdown-tree") }}
              {% else %}
                {{ fields.form_field(field, field.widget.multiple, "ui search dropdown") }}
              {% endif %}
              {% if field.widget.multiple %}
                {% set ns.counter = 0 %}
                </div>
                <div class="row">
              {% else %}
                {% set ns.counter = ns.counter + 1 %}
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>

      <div class="ui segment details product-details">
        <div class="ui grid">
          <div class="row">
            {% if not product.is_disabled %}
              {{ fields.local_date_form_readonly_field(product.created_at, "Enabled", "created_at") }}
              {{ fields.local_date_form_readonly_field(product.updated_at, "Last modified", "updated_at") }}
            {% else %}
              {{ fields.local_date_form_readonly_field(product.updated_at, "Disabled", "updated_at") }}
              {{ fields.local_date_form_readonly_field(product.created_at, "First enabled", "created_at") }}
            {% endif %}
          </div>
          <div class="row">
            {{ fields.local_date_form_readonly_field(product.last_login, "Last login", "last_login") }}
            {{ fields.local_date_form_readonly_field(product.last_activity, "Last activity", "last_activity") }}
          </div>
          <div class="row">
            {{ fields.local_date_form_readonly_field(product.first_login, "First login", "first_login") }}
          </div>
        </div>
      </div>

      <div class="ui grid">
        <div class="two wide column">
          {% if not product.is_disabled %}
            <button class="ui tiny button disable-button"
                    data-confirmation-message="Are You sure want to disable {{ product.name }} for this account?"
                    type="submit" name="action"
                    value="{{ form.Actions.DISABLE.name }}">
              <i class="icon ban"></i>{{ form.Actions.DISABLE.value }}
            </button>
          {% endif %}
        </div>
        <div class="ten wide column right aligned">
          <a class="ui tiny button" href="{{ url_for('.show_product', account_id=account.id, product_code=product.code) }}">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-product.js") }}"></script>
{% endblock %}