{% 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 %}

{% set has_claims = product.claims|length > 0 %}

{% 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">
          {% if account.is_external and account.status in (DNAAccountStatuses.PENDING, DNAAccountStatuses.INVITED) %}
            <form action="{{ url_for('.send_invitation', account_id=account.id, resource_group_id=product.resource_group.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 has_claims %}
            {% if product.is_disabled %}
              <a href="{{ url_for('.edit_product', account_id=account.id, product_code=product.resource_group.id) }}"
                 class="ui button pink tiny" id="edit-button"><i class="check icon"></i>Enable</a>
            {% else %}
              <a href="{{ url_for('.edit_product', account_id=account.id, product_code=product.resource_group.id) }}"
                 class="ui button yellow tiny" id="edit-button"><img class="icon"
                                                    src="{{ static_url_for('static', filename='img/icons/edit.svg') }}">Edit</a>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>

    <div class="ui segment details product-details">
      <div class="ui grid">
        <div class="row">
          {% if has_claims %}
            {% set ns = namespace(counter=0) %}
            {% for claim_name, claim_values in product.claims_tree.items() %}
              {% if ns.counter == 2 or claim_name.multiple_values_allowed %}
                  {% set ns.counter = 0 %}
                  </div>
                  <div class="row">
              {% endif %}
              {{ fields.claims_tree_info_field(
                  claim_name,
                  claim_values,
                  account
                ) }}
              {% if claim_name.multiple_values_allowed  %}
                {% set ns.counter = 0 %}
                </div>
                <div class="row">
              {% else %}
                {% set ns.counter = ns.counter + 1 %}
              {% endif %}
            {% endfor %}
          {% else %}
            No settings available
          {% endif %}
        </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_info_field(product.created_at, "Enabled", "created_at") }}
              {{ fields.local_date_info_field(product.updated_at, "Last modified", "updated_at") }}
            {% else %}
              {{ fields.local_date_info_field(product.updated_at, "Disabled", "updated_at") }}
              {{ fields.local_date_info_field(product.created_at, "First enabled", "created_at") }}
            {% endif %}
          </div>
          <div class="row">
            {{ fields.local_date_info_field(product.last_login, "Last login", "last_login") }}
            {{ fields.local_date_info_field(product.last_activity, "Last activity", "last_activity") }}
          </div>
          <div class="row">
            {{ fields.local_date_info_field(product.first_login, "First login", "first_login") }}
          </div>
        </div>
    </div>
    {% include "components/children_modal.html" %}
  </section>
{% endblock %}

{% block js %}
  {{ super() }}
  <script src="{{ static_url_for('static', filename='js/children.js') }}"></script>
{% endblock %}