{% extends 'nova/base.html' %}
{% load i18n sizeformat %}
{% block title %}Instance Detail{% endblock %}

{% block page_header %}
  {# to make searchable false, just remove it from the include statement #}
  {% include "horizon/common/_page_header.html" with title="Instance Detail: "|add:instance.name %}
{% endblock page_header %}

{% block dash_main %}
<ul id="instance_tabs">
  <li class="active"><a class="overview" href="#">{% trans "Overview" %}</a></li>
  <li><a class="log" href="#">{% trans "Log" %}</a></li>
  <li><a class="vnc" href="#">{% trans "VNC" %}</a></li>
</ul>

  <div class="dash_block">
    <div id="overview" class="tab_wrapper">
      <ul>
        <li>
          <div class="status">
            <h4>{% trans "Status" %}</h4>
            <ul>
              <li><span>{% trans "Status:" %}</span> {{ instance.status }}</li>
              <li><span>{% trans "Instance Name:" %}</span> {{ instance.name }}</li>
              <li><span>{% trans "Instance ID:" %}</span> {{ instance.id }}</li>
            </ul>
          </div>
        </li>

        <li>
          <div class="specs">
            <h4>{% trans "Specs" %}</h4>
            <ul>
              <li><span>{% trans "RAM:" %}</span> {{ instance.full_flavor.ram|mbformat }}</li>
              <li><span>{% trans "VCPUs:" %}</span> {{ instance.full_flavor.vcpus }} {% trans "VCPU" %}</li>
              <li><span>{% trans "Disk:" %}</span> {{ instance.full_flavor.disk }}{% trans "GB" %}</li>
            </ul>
          </div>
        </li>

        <li>
          <div class="addresses">
            <h4>{% trans "IP Addresses" %}</h4>
            <ul>
              {% for network, ip_list in instance.addresses.items %}
              <li><span>{{ network|title }}:</span>
                {% for ip in ip_list %}
                    {% if not forloop.last %}{{ ip.addr}}, {% else %}{{ip.addr}}{% endif %}
                {% endfor %}
              </li>
              {% endfor %}
            </ul>
          </div>
        </li>

        <li>
          <div class="meta">
            <h4>{% trans "Meta" %}</h4>
            <ul>
              <li><span>{% trans "Key name:" %}</span> {{ instance.key_name }}</li>
              {% comment %} Security Groups aren't sent back from Nova anymore...
              <li><span>{% trans "Security Group(s):" %}</span> {% for group in instance.attrs.security_groups %}{{group}}, {% endfor %}</li>
              {% endcomment %}
              <li><span>{% trans "Image Name:" %}</span> {{ instance.image_name }}</li>
            </ul>
          </div>
        </li>
        <li>
          <div>
            <h4>{% trans "Volumes" %}</h4>
            <ul>
              {% if volumes %}
                {% for volume in volumes %}
                <li>
                  <span>{% trans "Volume:" %}</span>
                  <a href="{% url horizon:nova:instances_and_volumes:volumes:detail volume.volumeId %}">
                    {{ volume.volumeId }} ({{ volume.device }})
                  </a>
                </li>
                {% endfor %}
              {% else %}
              <li><span>{% trans "None Attached" %}</span></li>
              {% endif %}
            </ul>
          </div>
        </li>
      </ul>
    </div>

    <div id="log" class="tab_wrapper">
      <a class="view_full" target="_blank" href="{% url horizon:nova:instances_and_volumes:instances:console instance.id %}">{% trans "View Full Log" %}</a>
      <pre class="logs"></pre>
    </div>

    <div id="vnc" class="tab_wrapper">
      <iframe src="{{vnc_url}}" width="720" height="420"></iframe>
    </div>

  </div>
{% endblock %}

{% block footer_js %}
  <script type="text/javascript" charset="utf-8">
    $(function(){
      $(".dash_block div.tab_wrapper").hide()
      $(".dash_block div.tab_wrapper:first").show()

      $("#instance_tabs a").click(function(e){
        e.preventDefault()
        e.stopPropagation()
        $(".dash_block div.tab_wrapper").hide('fast')
        $(".dash_block div#"+$(this).attr('class')).show('fast')

        $("#instance_tabs li").removeClass('active')
        $(this).parent().toggleClass('active')
      })

      $('a.log').click(function(){
        getlog()
      })

      setInterval(function(){
        if ($("a.log").parent().hasClass('active')) {
          getlog()
        }
      }, 3000)
    })

    function getlog(){
      $.get("{% url horizon:nova:instances_and_volumes:instances:console instance.id %}?length=25", function(data){
        $("#log .logs").html(data)
      })
    }
  </script>
{% endblock footer_js %}
