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


{% block title %}Update Application: {{ application.name }}{% endblock %}

{% block subnav_header %}
  {% if current_user.is_admin %}{{ application.dna_account.email }} -> {% endif %}{{ application.name }}
{% endblock %}

{% block subnav_items %}
{% 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>
              Application details
            </h3>
          </div>
        </div>
        <div class="ui four wide column right aligned">
        </div>
      </div>
    </div>

    <form method="POST" id="application-editing-form">
      {{ form.csrf_token }}
      <div class="ui segment details application-details">
        <div class="ui grid">

          <div class="row">
            {{ fields.form_field(form.name) }}
            {{ fields.form_field(form.resource_group) }}
          </div>

          <div class="row">
              {{ fields.form_field(form.audience, tooltip="This feature concludes the value to assert the applications purpose on your back-end. If there's a product that is backed with several services behind it and you'd like to allow access to one of the services, use this function to do so.") }}
              {{ fields.form_readonly_field(application.token_audience, "Token audience", "token-audience", tooltip="The Token Audience value consists of product prefixes and suffixes from the editable Audience field.<br>For example, Product &quot;test_product&quot; and Audience &quot;test_audience&quot; would become &quot;test_product|test_audience&quot;.") }}
          </div>

        </div>
      </div>

      <div class="ui segment details application-details">
        <div class="ui grid">
          <div class="row">
              {{ fields.form_field(form.ttl) }}
              {{ fields.form_field(form.scope) }}
          </div>
          <div class="row">
            <div class="two wide column" data-element-name="client_id">
              <label class="editable">Client ID</label>
            </div>
            <div class="four wide column">
              <div class="ui icon input value disabled copy copy-client_id"  data-tooltip="Copy to clipboard" data-inverted="" data-variation="mini" data-position="bottom center">
                <input disabled id="client_id" name="client_id" type="text" value="{{ application.client_id }}">
                <i class="icon copy alternate copy-button"></i>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="two wide column" data-element-name="client_secret">
              <label class="editable">Client secret</label>
            </div>
            <div class="four wide column">
              <div class="ui icon input value disabled copy copy-client_secret"   data-tooltip="Copy to clipboard" data-inverted="" data-variation="mini" data-position="bottom center">
                <input class="expose-input" disabled id="client_secret" name="client_secret" type="password" value="{{ application.client_secret }}">
                <i class="icon copy alternate copy-button"></i>
              </div>
            </div>
            <div class="three wide column">
              <div class="client-secret-actions">
                <a id="expose-button" class="">View</a>
                <a id="reset-button" class="">Reset</a>
              </div>
            </div>
            <div class="three wide column right aligned">
              <div class="token-actions">
                <a id="token-link" href="{{ url_for(".get_token", application_id=application.id) }}">Get short living M2M token</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui grid">
        <div class="two wide column">
          {% if not application.is_deleted %}
            <button class="ui tiny button delete-button"
                    data-confirmation-message="Are You sure want to suspend this application?"
                    type="submit"
                    form="delete_form"
                    id="delete_button"
            >
              <img class="icon" src="{{ static_url_for("static", filename="img/icons/status-suspended.svg") }}">Suspend
            </button>
          {% endif %}
        </div>
        <div class="ten wide column right aligned">
          <a class="ui tiny button" href="{{ url_for(".list") }}">Cancel</a>
          <button class="ui pink tiny button" type="submit" id="save_button">Save</button>
        </div>
      </div>
    </form>
    <form id="delete_form" method="post" action="{{ url_for(".delete", application_id=application.id) }}">{{ form.csrf_token }}</form>
    <form id="reset_secret_form" method="post" action="{{ url_for(".reset_secret", application_id=application.id) }}">{{ form.csrf_token }}</form>
  </section>
{% endblock %}

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

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