{% extends "apps/base.html" %}
{% load staticfiles %}

{% block navbar %}
{% include "apps/navbar.html" with active="settings" %}
{% endblock %}

{% block app-content %}
<div class="row">
  <div class="col-md-12">
    <h3>Info</h3>
    <div class="content">
      <p><strong>Git URL:</strong> {{ app.repository }}</p>
      <p><strong>Platform:</strong> {{ app.platform }}</p>
      <p><strong>Pool:</strong> {{ app.pool }}</p>
    </div>
    {% if app.lock.Locked %}
    <h3>App locked</h3>
    <div class="content">
      <p><strong>Reason:</strong> {{ app.lock.Reason }}</p>
      <p><strong>Acquire date:</strong> {{ app.lock.AcquireDate }}</p>
      <a class="btn" href="#unlock-confirmation" data-toggle="modal">
        Unlock app
      </a>
    </div>
    {% endif %}
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <h3>Plan</h3>
    <div class="content">
      <p><strong>Name:</strong> {{ app.plan.name }}</p>
      <p><strong>Memory:</strong> {{ app.plan.memory|filesizeformat }}</p>
      <p><strong>Swap:</strong> {{ app.plan.swap|filesizeformat }}</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-10">
    <div class="content">
      <h3>Environment variables</h3>
      <p class="settings-toggle"><a href=#>&#x25BC;</a> {{ app.envs|length }} enviroment variables</p>
      <table class="table hide settings-content">
        <thead>
          <tr>
            <th>Name</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {% for env in app.envs %}
          {% if env.public %}
          <tr>
            <td>{{ env.name }}</td>
            <td>{{ env.value }}</td>
          </tr>
          {% endif %}
          {% endfor %}
          {% for env in app.envs %}
          {% if not env.public %}
          <tr>
            <td>{{ env.name }}</td>
            <td>******</td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <h3>Domains</h3>
    <div class="content">
      <p>
        {% if app.cname or app.ip %}
        <strong>App url:</strong>
        <a href="http://{{ app.ip }}" target="_blank">http://{{ app.ip }}</a>
        {% for cname in app.cname %}
        <a href="http://{{ cname }}" target="_blank">http://{{ cname }}</a>
        {% endfor %}
        {% endif %}
      </p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <h3>Ownership</h3>
    <div class="content">
      <p><strong>Owner:</strong> {{ app.owner }}</p>
      <p><strong>Team owner:</strong> {{ app.teamowner }}</p>
      <p><strong>Teams:</strong> {{ app.teams|join:", " }}</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <h3>Delete app</h3>
    <div class="content">
      <a class="btn btn-danger" href="#confirmation" data-toggle="modal">
        Delete app</a>
      </div>
    </div>
  </div>

  <div id="confirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="myModalLabel">Are you sure?</h3>
        </div>
        <div class="modal-body">
          <p>This action <strong>CANNOT</strong> be undone. This will permanently delete the <strong>{{ app.name }}</strong> application.</p>

          <p>Please type in the name of your application to confirm.</p>
          <input type="text" class="remove-confirmation" />
        </div>
        <div class="modal-footer">
          <form method="get" action="{% url 'remove_app' app.name %}">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button class="btn btn-danger btn-remove" disabled="disabled">I understand the consequences, delete this application</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div id="unlock-confirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="myModalLabel">Unlock {{ app.name }}</h3>
        </div>
        <div class="modal-body">
          <p>Please type in the name of your application to confirm.</p>
          <input type="text" class="unlock-confirmation" />
        </div>
        <div class="modal-footer">
          <form method="get" action="{% url "unlock-app"  app.name %}">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button class="btn btn-unlock" disabled="disabled">Unlock app</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  {% endblock %}

  {% block extra_js %}
  <script src="{% static "js/confirmation.js" %}"></script>
  <script type="text/javascript">
  var appName = "{{ app.name }}";
  $.confirmation(".btn-remove", ".remove-confirmation", appName);
  $.confirmation(".btn-unlock", ".unlock-confirmation", appName);
  $(".settings-toggle").on("click", function() {
    $(".settings-content").toggleClass("hide");
  });
  </script>
  {% endblock %}
