<header class="jumbotron page-header">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Office Locations API</h1>
      </div>
    </div>
  </div>
</header>

{% if current_user %}
  <section class="start">
  <div class="container">
  <div class="row">
    <div class="col-md-6">
      <h1>Your API Key</h1>
      <br>
      <p class="lead">
       This is your API key that should be kept secret. Use it to authenticate and report the calls you make to the Office Locations API.
      </p>
    </div>
    <div class="col-md-6" style="padding-top:2em;">
      <div class="panel panel-default" id="access-details">
        <div class="panel-heading">
          <i class="fa fa-key"></i>
          Credentials
          {% if current_account.applications.size > 0 %}
            <a class="pull-right" href="{{ urls.applications }}" title="Applications">
              <i class="fa fa-chevron-right"></i>
            </a>
          {% endif %}
        </div>
        <div class="panel-body panel-footer">
          {% if current_account.applications.size == 0 %}
            <a href="{{ urls.new_application }}" class="btn btn-primary">Create Application</a>
          {% elsif current_account.applications.size == 1 %}
            {% assign app = current_account.applications.first %}

            {% if app.user_key_mode? %}
              <dl class="dl-horizontal">
                <dt>App name</dt>
                <dd><a href="{{ app.url }}">{{ app.name }}</a></dd>
                <dt>Key</dt>
                <dd>
                  <code>{{ app.user_key }}</code>
                  <p>Add this as a <code>user_key</code> parameter to your API calls to authenticate.</p>
                </dd>
              </dl>

            {% elsif app.app_id_mode? %}
              <dl class="dl-horizontal">
                <dt>App name</dt>
                <dd><a href="{{ app.url }}">{{ app.name }}</a></dd>
                <dt>App ID</dt>
                <dd><code>{{ app.application_id }}</code></dd>
                <dt>Key</dt>
                <dd><code>{{ app.keys.first }}</code></dd>
              </dl>

            {% elsif app.oauth_mode? %}
              <dl class="dl-horizontal">
                <dt>App name</dt>
                <dd><a href="{{ app.url }}">{{ app.name }}</a></dd>
                <dt>Client ID</dt>
                <dd><code>{{ app.application_id }}</code></dd>
                <dt>Client Secret</dt>
                <dd><code>{{ app.keys.first }}</code></dd>
              </dl>
            {% endif %}

            {% if app.trial? %}
              <div class="alert alert-warning">
                <h3>Trial period</h3>
                <p>{{ app.remaining_trial_period_days }} days remaining.</p>
              </div>
            {% endif %}

          {% elsif current_account.applications.size > 1 %}
            <a href="{{ urls.applications }}" class="btn btn-primary">See your Applications & their credentials</a>
          {% endif %}
          </div>
        </div>
      </div>
    </div>

  </div>
  </section>

{% else %}

  <section class="sell">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h3>Register</h3>
          <p>
          <i class="fa fa-sign-in fa-3x pull-left"></i>
          Register to the developer portal to use the Office Locations API
          </p>
        </div>
        <div class="col-md-4">
          <h3>Get your API key</h3>
          <p>
          <i class="fa fa-key fa-3x pull-left"></i>
          Use your API key to authenticate and report the calls you make
          </p>
        </div>
       <div class="col-md-4">
        <h3>Create your app</h3>
         <p>
         <i class="fa fa-code fa-3x pull-left"></i>
         Start coding and create awesome applications with the Office Locations API
         </p>
        </div>
       </div>
      </div>
  </section>

  <section class="plans" id="plans">
    <div class="container">
      <h1>Pick your plan</h1>
      <br/>
      <div class="row">
        {% for plan in provider.services.api.application_plans %}
          <div class="col-md-6">
            <article class="panel panel-default">
              <div class="panel-heading">
                <strong>{{ plan.name }}</strong>
              </div>
              <div class="panel-body">
                <div class="row">

                  {% if plan.features == present %}
                    <div class="col-md-6">
                      <h5>Features</h5>
                      <ul class="features list-unstyled">
                        {% for feature in plan.features %}
                          <li>
                            <i class="fa fa-check"></i>
                            {{ feature.name }}
                          </li>
                        {% endfor %}
                      </ul>
                    </div>
                  {% endif %}

                  <div class="col-md-6">
                    <h5>Limits</h5>
                    <ul class="limits list-unstyled">
                      {% if plan.usage_limits == present %}
                        {% for limit in plan.usage_limits %}
                          <li>
                            <i class="fa fa-signal"></i>
                            {{ limit.metric.name }} &ndash; {{ limit.value }} {{ limit.metric.unit }}s per {{ limit.period }}
                          </li>
                        {% endfor %}
                      {% else %}
                        <li>
                          <i class="fa fa-signal"></i>
                          No limits
                        </li>
                      {% endif %}
                    </ul>
                  </div>

                </div>
              </div>
                <div class="panel-footer">
                <div class="row">
                  <div class="col-md-12">

                    <a class="btn btn-success pull-right" href="{{ urls.signup }}?{{ plan | to_param }}">Signup to plan {{ plan.name }}</a>
                  </div>
                </div>

              </div>
            </article>
          </div>
        {% endfor %}
      </div>
      <div class="col-md-6">
            <article class="panel panel-default">
              <div class="panel-heading">
                <strong>Secured</strong>
              </div>
              <div class="panel-body">
                <div class="row">

                  
                    <div class="col-md-6">
                      <h5>Features</h5>
                      <ul class="features list-unstyled">
                        
                          <li>
                            <i class="fa fa-check"></i>
                            Unlimited Greetings
                          </li>
                        
                      </ul>
                    </div>
                  

                  <div class="col-md-6">
                    <h5>Limits</h5>
                    <ul class="limits list-unstyled">
                      
                        <li>
                          <i class="fa fa-signal"></i>
                          No limits
                        </li>
                      
                    </ul>
                  </div>

                </div>
              </div>
                <div class="panel-footer">
                <div class="row">
                  <div class="col-md-12">

                    <a class="btn btn-success pull-right" href="CHANGE_ME_URL">Signup to plan Secure</a>
                  </div>
                </div>

              </div>
            </article>
          </div>
    </div>
  </section>
{% endif %}

<section class="invert">
  <div class="container">
    <h1>Run your requests</h1>
    <div class="row">

      <div class="col-md-12">
        <h4><code style="display:block">$ curl -k -v "https://location-api.amp.dil.opentry.me:443/locations"</code></h4>
        <br/>
        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-heading">
                Request
              </div>
              <div class="panel-body panel-footer">
                <pre>
&gt; GET /locations?user_key=87275aa6d90b0ae033deb235d86fb181 HTTP/1.1
&gt; Host: location-api.amp.dil.opentry.me
&gt; User-Agent: curl/7.54.0
&gt; Accept: */*
&gt;
                </pre>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-heading">
                Response
              </div>
              <div class="panel-body panel-footer">
                <pre>
&lt; HTTP/1.1 200 OK
&lt; Server: openresty/1.13.6.1
&lt; Date: Fri, 06 Jul 2018 01:11:16 GMT
&lt; Content-Type: application/json
&lt; Content-Length: 740
&lt; Cache-control: private
&lt; Set-Cookie: d8c1dd0e39ac4456ed39ce5889b9a5a5=1f3ae150fd257186107c0631ee0eaaa3; path=/; HttpOnly
&lt; Vary: Origin
&lt; X-Content-Type-Options: nosniff
[
    {
        "id": 1,
        "name": "International Inc Corporate Office",
        "location": {
            "lat": 51.5013673,
            "long": -0.1440787
        },
        "type": "headquarter",
        "status": "1"
    },
    {
        "id": 2,
        "name": "International Inc North America",
        "location": {
            "lat": 40.6976701,
            "long": -74.259876
        },
        "type": "office",
        "status": "1"
    },
    {
        "id": 3,
        "name": "International Inc France",
        "location": {
            "lat": 48.859,
            "long": 2.2069746
        },
        "type": "office",
        "status": "1"
    }
]

                </pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>