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


{% block title %}Create New Application{% endblock %}

{% block subnav_header %}
  Create New Application
{% 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
            </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("To be generated", "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">
                <input disabled="" id="client_id" name="client_id" type="text" value="">
                <i id="copy-client_id" 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">
                <input class="expose-input" disabled="" id="client_secret" name="client_secret" type="password" value="">
                <i id="copy-client_secret" class="icon copy alternate copy-button"></i>
              </div>
            </div>
            <div class="six wide column">
              <div class="client-secret-actions">
                <a id="expose-button" class="disabled">View</a>
                <a id="reset-button" class="disabled">Reset</a>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="ui grid">
        <div class="two wide column">

        </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" name="action" >Save</button>
        </div>
      </div>

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

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