{% extends 'console/metrics_base.html' %}
{% load cycle from future %}
{% load console_tags %}



{% block content %}

    <h3>Container <b>{{ container.name }} ({{ container.uid }})</b></h3>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
      <li class="{% if not active_panel %}active{% endif %}">
          <a href="#infos" data-toggle="tab">Info</a>
      </li>
      <li{% if active_panel == 'ssh' %} class="active"{% endif %}>
          <a href="#ssh" data-toggle="tab">SSH keys</a>
      </li>
      <li{% if active_panel == 'metrics' %} class="active"{% endif %}>
          <a href="#metrics" data-toggle="tab">Metrics</a>
      </li>
    </ul>


    <!-- Tab panes -->
    <div class="tab-content">

        <!-- INFO -->
        <div class="tab-pane{% if not active_panel %} active{% endif %}" id="infos">
            <form id="container-form" class="form-inline" role="form" action="{% url 'console_containers' container.uid %}" method="post">
                {% csrf_token %}
                <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                    {% for k, v in container_copy.items %}
                        <tr>
                            <td>{{ k|get_title }}</td>
                            <td>
                                {% if k == 'legion_address' or k == 'linked_to' %}
                                    {{ v|join:", " }}
                                {% else %}
                                    {{ v }}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    {{ containerform }}

                    </table>
                    <button id="update-container" type="button" data-loading-text="Loading..." class="btn btn-primary submit-container-form">Update</button>
                </div>
            </form>
        </div>


        <!-- SSH -->
        <div class="tab-pane{% if active_panel == 'ssh' %} active{% endif %}" id="ssh">
            <h2>Add or remove ssh keys</h2>
            {% if messages %}
                {% for message in messages %}
                    <div class="alert{% if message.tags %} alert-{{ message.tags }}{% endif %}" role="alert">{{ message }}</div>
                {% endfor %}
            {% endif %}
            <div class="div-as-tablerow row div-hover">
                <form id="ssh-form" class="form-inline" role="form" action="{% url 'console_containers' container.uid %}" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="action" id="id_action"/>
                    {{ sshform }}
                    <button id="add-key" type="button" data-loading-text="Loading..." class="btn btn-primary submit-container-form margin-top">Add</button>
                </form>
            </div>

            {% for k in container.ssh_keys %}
                <div class="div-as-tablerow row {% cycle '' 'strip' %}">
                    <div id="ssh-{{ forloop.counter }}" class="col-md-11 word-break">{{ k }}</div>
                    <div class="col-md-1">
                        <a class="remove-key submit-container-form" href="#" title="Remove" data-id="ssh-{{ forloop.counter }}" data-action="del-key" data-field="key">
                            <span class="glyphicon glyphicon-remove-circle"></span>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Metrics -->
        <div class="tab-pane{% if active_panel == 'metrics' %} active{% endif %}" id="metrics">
            {% get_metrics_list container as metrics %}
            {% include "console/metrics.html" with arg=container.uid id='container' %}
        </div>
    </div>

{% endblock %}

{% block footer_js %}
    {{ block.super }}
    <script>
        var subject = '{{ container.name }}' + ' ' + '{{ container.uid }}';
    </script>
    <script src="{{ STATIC_URL }}console/js/multiple_metrics.js"></script>

{% endblock %}

