{% extends 'virtualization/virtualmachine/base.html' %}
{% load buttons %}
{% load static %}
{% load helpers %}
{% load plugins %}

{% block content %}
<div class="row my-3">
	<div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">
                Virtual Machine
            </h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <tr>
                        <th scope="row">Name</th>
                        <td>{{ object }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Status</th>
                        <td>{% badge object.get_status_display bg_color=object.get_status_color %}</td>
                    </tr>
                    <tr>
                        <th scope="row">Role</th>
                        <td>{{ object.role|linkify|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Platform</th>
                        <td>{{ object.platform|linkify|placeholder }}</td>
                    </tr>
                    <tr>
                      <th scope="row">Description</th>
                      <td>{{ object.description|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Tenant</th>
                        <td>
                            {% if object.tenant.group %}
                                {{ object.tenant.group|linkify }} /
                            {% endif %}
                            {{ object.tenant|linkify|placeholder }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Primary IPv4</th>
                        <td>
                          {% if object.primary_ip4 %}
                            <a href="{% url 'ipam:ipaddress' pk=object.primary_ip4.pk %}">{{ object.primary_ip4.address.ip }}</a>
                            {% if object.primary_ip4.nat_inside %}
                              (NAT for <a href="{{ object.primary_ip4.nat_inside.get_absolute_url }}">{{ object.primary_ip4.nat_inside.address.ip }}</a>)
                            {% elif object.primary_ip4.nat_outside.exists %}
                              (NAT: {% for nat in object.primary_ip4.nat_outside.all %}<a href="{{ nat.get_absolute_url }}">{{ nat.address.ip }}</a>{% if not forloop.last %}, {% endif %}{% endfor %})
                            {% endif %}
                          {% else %}
                            {{ ''|placeholder }}
                          {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Primary IPv6</th>
                        <td>
                          {% if object.primary_ip6 %}
                            <a href="{% url 'ipam:ipaddress' pk=object.primary_ip6.pk %}">{{ object.primary_ip6.address.ip }}</a>
                            {% if object.primary_ip6.nat_inside %}
                              (NAT for <a href="{{ object.primary_ip6.nat_inside.get_absolute_url }}">{{ object.primary_ip6.nat_inside.address.ip }}</a>)
                            {% elif object.primary_ip6.nat_outside.exists %}
                              (NAT: {% for nat in object.primary_ip6.nat_outside.all %}<a href="{{ nat.get_absolute_url }}">{{ nat.address.ip }}</a>{% if not forloop.last %}, {% endif %}{% endfor %})
                            {% endif %}
                          {% else %}
                            {{ ''|placeholder }}
                          {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        {% include 'inc/panels/custom_fields.html' %}
        {% include 'inc/panels/tags.html' %}
        {% include 'inc/panels/comments.html' %}
        {% plugin_left_page object %}
    </div>
	<div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">Cluster</h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <tr>
                        <th scope="row">Site</th>
                        <td>
                            {{ object.site|linkify|placeholder }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Cluster</th>
                        <td>
                            {% if object.cluster.group %}
                                {{ object.cluster.group|linkify }} /
                            {% endif %}
                            {{ object.cluster|linkify|placeholder }}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Cluster Type</th>
                        <td>{{ object.cluster.type }}</td>
                    </tr>
                    <tr>
                        <th scope="row">Device</th>
                        <td>
                            {{ object.device|linkify|placeholder }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="card">
            <h5 class="card-header">Resources</h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <tr>
                        <th scope="row"><i class="mdi mdi-gauge"></i> Virtual CPUs</th>
                        <td>{{ object.vcpus|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row"><i class="mdi mdi-chip"></i> Memory</th>
                        <td>
                            {% if object.memory %}
                                {{ object.memory|humanize_megabytes }}
                            {% else %}
                                {{ ''|placeholder }}
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><i class="mdi mdi-harddisk"></i> Disk Space</th>
                        <td>
                            {% if object.disk %}
                                {{ object.disk }} GB
                            {% else %}
                                {{ ''|placeholder }}
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="card">
          <h5 class="card-header">Services</h5>
          <div class="card-body htmx-container table-responsive"
            hx-get="{% url 'ipam:service_list' %}?virtual_machine_id={{ object.pk }}"
            hx-trigger="load"
          ></div>
          {% if perms.ipam.add_service %}
            <div class="card-footer text-end noprint">
              <a href="{% url 'ipam:service_add' %}?virtual_machine={{ object.pk }}" class="btn btn-sm btn-primary">
                <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add a service
              </a>
            </div>
          {% endif %}
        </div>
        {% include 'inc/panels/contacts.html' %}
        {% plugin_right_page object %}
    </div>
</div>
<div class="row">
    <div class="col col-md-12">
        {% plugin_full_width_page object %}
    </div>
</div>
{% endblock %}