{% extends "base.html" %}

{% block title %}
  <title>Authorize {{ application.name }} · Quay.io</title>
{% endblock %}

{% block body_content %}
  <div class="container" ng-if="user.anonymous">
    <div class="col-sm-6 col-sm-offset-3">
      <div class="user-setup"></div>
    </div>
  </div>

  <div class="container auth-container" ng-if="!user.anonymous">
    <div class="auth-header">
      <img src="//www.gravatar.com/avatar/{{ application.gravatar }}?s=48&d=identicon">
      <h2><a href="{{ application.url }}" target="_blank">{{ application.name }}</a></h2>
      <h4>
        <img src="//www.gravatar.com/avatar/{{ application.organization.gravatar }}?s=24&d=identicon" style="vertical-align: middle; margin-right: 4px;"> 
        <span style="vertical-align: middle">{{ application.organization.name }}</span>
      </h4>
    </div>

    <div class="auth-scopes">
      <div class="reason">This application would like permission to:</div>
      <div class="panel-group">
        {% for index, scope in enumerate(scopes) %}
        <div class="scope panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                <div class="title-container">
                  <div class="title collapsed" data-toggle="collapse" data-parent="#scopeGroup" data-target="#description-{{ index }}">
                    <i class="fa arrow"></i>
                    <i class="fa {{ scope.icon }} fa-lg"></i>
                    <a data-toggle="collapse" href="#collapseOne">
                      {{ scope.title }}
                    </a>
                  </div>
                </div>
            </h4>
          </div>
          <div id="description-{{ index }}" class="panel-collapse collapse out">
            <div class="panel-body">
              {{ scope.description }}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <div class="button-bar">
      <form method="post" action="/oauth/authorizeapp">
        <input type="hidden" name="client_id" value="{{ client_id }}">
        <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
        <input type="hidden" name="scope" value="{{ scope }}">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token_val }}">
        <button type="submit" class="btn btn-success">Authorize Application</button>
      </form><form method="post" action="/oauth/denyapp">
        <input type="hidden" name="client_id" value="{{ client_id }}">
        <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
        <input type="hidden" name="scope" value="{{ scope }}">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token_val }}">
        <button type="submit" class="btn btn-default">Cancel</button>
      </form>
    </div>
  </div>
{% endblock %}