{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Instance" %} - {{ vname }}{% endblock %}
{% block content %}
                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">{{ vname }}</h1>
                    </div>
                </div>
                <!-- /.row -->

                {% include 'errors_block.html' %}

                <div class="row">
                    <div class="col-lg-12">

                                    Status:
                                    {% ifequal status 5 %}
                                       <span class="text-danger">{% trans "Off" %}</span>
                                    {% endifequal %}
                                    {% ifequal status 1 %}
                                        <span class="text-success">{% trans "Active" %}</span>
                                    {% endifequal %}
                                    {% ifequal status 3 %}
                                        <span class="text-warning">{% trans "Suspend" %}</span>
                                    {% endifequal %}

                            Vcpu: {% if cur_vcpu %}{{ cur_vcpu }}{% else %}{{ vcpu }}{% endif %}
                           Ram: {{ cur_memory }}{% trans "MB" %}
                            {% ifnotequal description 'None' %}
                                {{ description }}
                            {% endifnotequal %}

                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-lg-12">
                        <div role="tabpanel">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills" role="tablist">
                                <li role="presentation" class="active">
                                    <a href="#power" id="action-button" aria-controls="power" role="tab" data-toggle="tab">
                                        <span id="action-block" class="glyphicon glyphicon-off" aria-hidden="true"></span>
                                        {% trans "Power" %}
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#access" id="action-button" aria-controls="access" role="tab" data-toggle="tab">
                                        <span id="action-block" class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                                        {% trans "Access" %}
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#resize" id="action-button" aria-controls="resize" role="tab" data-toggle="tab">
                                        <span id="action-block" class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
                                        {% trans "Resize" %}
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#snapshots" id="action-button" aria-controls="snapshots" role="tab" data-toggle="tab">
                                        <span id="action-block" class="glyphicon glyphicon-camera" aria-hidden="true"></span>
                                        {% trans "Snapshots" %}
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#settings" id="action-button" aria-controls="settings" role="tab" data-toggle="tab">
                                        <span id="action-block" class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                                        {% trans "Settings" %}
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#graphics" id="action-button" aria-controls="graphics" role="tab" data-toggle="tab">
                                        <span id="action-block" class="glyphicon glyphicon-signal" aria-hidden="true"></span>
                                        {% trans "Graphs" %}
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a href="#undefine" id="action-button" aria-controls="undefine" role="tab" data-toggle="tab">
                                        <span id="action-block" class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                        {% trans "Destroy" %}
                                    </a>
                                </li>
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="power">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            {% ifequal status 1 %}
                                                <li role="presentation" class="active">
                                                    <a href="#powercycle" aria-controls="powercycle" role="tab" data-toggle="tab">
                                                        {% trans "Power Cycle" %}
                                                    </a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="#poweroff" aria-controls="poweroff" role="tab" data-toggle="tab">
                                                        {% trans "Power Off" %}
                                                    </a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="#suspend" aria-controls="suspend" role="tab" data-toggle="tab">
                                                        {% trans "Suspend" %}
                                                    </a>
                                                </li>
                                            {% endifequal %}
                                            {% ifequal status 3 %}
                                                <li role="presentation" class="active">
                                                    <a href="#resume" aria-controls="resume" role="tab" data-toggle="tab">
                                                        {% trans "Reboot" %}
                                                    </a>
                                                </li>
                                            {% endifequal %}
                                            {% ifequal status 5 %}
                                                <li role="presentation" class="active">
                                                    <a href="#boot" aria-controls="boot" role="tab" data-toggle="tab">
                                                        {% trans "Boot" %}
                                                    </a>
                                                </li>
                                            {% endifequal %}
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            {% ifequal status 1 %}
                                                <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="powercycle">
                                                    <p>{% trans "This action forcibly powers off the instance and may cause data corruption." %}</p>
                                                    <form action="" method="post" role="form">{% csrf_token %}
                                                        <input type="submit" name="powercycle" class="btn btn-lg btn-success pull-right" value="{% trans "Power Cycle" %}">
                                                        <div class="clearfix"></div>
                                                    </form>
                                                </div>
                                                <div role="tabpanel" class="tab-pane tab-pane-bordered" id="poweroff">
                                                    <p>{% trans "This action sends an ACPI shutdown signal to the instance." %}</p>
                                                     <form action="" method="post" role="form">{% csrf_token %}
                                                        <input type="submit" name="poweroff" class="btn btn-lg btn-success pull-right" value="{% trans "Power Off" %}">
                                                        <div class="clearfix"></div>
                                                    </form>
                                                </div>
                                                <div role="tabpanel" class="tab-pane tab-pane-bordered" id="suspend">
                                                    <p>{% trans "This action suspends the instance." %}</p>
                                                     <form action="" method="post" role="form">{% csrf_token %}
                                                        <input type="submit" name="suspend" class="btn btn-lg btn-success pull-right" value="{% trans "Suspend" %}">
                                                        <div class="clearfix"></div>
                                                    </form>
                                                </div>
                                            {% endifequal %}
                                            {% ifequal status 3 %}
                                                <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="resume">
                                                    <p>{% trans "This action restore the instance after suspend." %}</p>
                                                     <form action="" method="post" role="form">{% csrf_token %}
                                                        <input type="submit" name="resume" class="btn btn-lg btn-success pull-right" value="{% trans "Resume" %}">
                                                        <div class="clearfix"></div>
                                                    </form>
                                                </div>
                                            {% endifequal %}
                                            {% ifequal status 5 %}
                                                <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="boot">
                                                    <p>{% trans "Click on Boot button to start this instance." %}</p>
                                                    <form action="" method="post" role="form">{% csrf_token %}
                                                        <input type="submit" name="boot" class="btn btn-lg btn-success pull-right" value="{% trans "Boot" %}">
                                                        <div class="clearfix"></div>
                                                    </form>
                                                </div>
                                            {% endifequal %}
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="access">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active">
                                                <a href="#vnconsole" aria-controls="vnconsole" role="tab" data-toggle="tab">
                                                    {% trans "Console" %}
                                                </a>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="vnconsole">
                                                <p>{% trans "This action opens a new window with a VNC connection to the console of the instance." %}</p>
                                                {% ifequal status 5 %}
                                                    <button class="btn btn-lg btn-success pull-right disabled">{% trans "Console" %}</button>
                                                {% else %}
                                                    <a href="#" class="btn btn-lg btn-success pull-right" title="Console port: {{ console_port }}" onclick="open_console()">{% trans "Console" %}</a>
                                                {% endifequal %}
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="resize">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active">
                                                <a href="#resizevm" aria-controls="resizevm" role="tab" data-toggle="tab">
                                                    {% trans "Resize Instance" %}
                                                </a>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="resizevm">
                                                <p>Resize Instance</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="snapshots">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active">
                                                <a href="#takesnapshot" aria-controls="takesnapshot" role="tab" data-toggle="tab">
                                                    {% trans "Take Snapshot" %}
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a href="#restoresnapshot" aria-controls="restoresnapshot" role="tab" data-toggle="tab">
                                                    {% trans "Restore From Snapshot" %}
                                                </a>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="takesnapshot">
                                                {% ifequal status 5 %}
                                                    <p>{% trans "This may take more than an hour, depending on how much content is on your droplet and how large the disk is." %}</p>
                                                    <form class="form-inline" method="post" role="form">{% csrf_token %}
                                                        <div class="form-group">
                                                            <div class="col-sm-4">
                                                                <input type="text" class="form-control" name="name" placeholder="{% trans "Enter Snapshot Name" %}" maxlength="14">
                                                            </div>
                                                        </div>
                                                        {% ifequal status 5 %}
                                                            <input type="submit" class="btn btn-lg btn-success pull-right" name="snapshot" value="{% trans "Take Snapshot" %}">
                                                        {% else %}
                                                            <button class="btn btn-lg btn-success pull-right disabled">{% trans "Take Snapshot" %}</button>
                                                        {% endifequal %}
                                                    </form>
                                                    <div class="clearfix"></div>
                                                {% else %}
                                                    <p>{% trans "To take a snapshot please Power Off the instance." %}</p>
                                                {% endifequal %}
                                            </div>
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered" id="restoresnapshot">
                                               {% ifequal status 5 %}
                                                    {% if snapshots %}
                                                        <table class="table table-bordered">
                                                            <thead>
                                                            <tr class="active">
                                                                <th>{% trans "Name" %}</th>
                                                                <th>{% trans "Date" %}</th>
                                                                <th colspan="2">{% trans "Action" %}</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            {% for snap in snapshots %}
                                                                <tr>
                                                                    <td><strong>{{ snap.name }}</strong></td>
                                                                    <td>{{ snap.date|date:"M d H:i:s" }}</td>
                                                                    <td style="width:30px;">
                                                                        <form action="" method="post" style="height:10px" role="form">{% csrf_token %}
                                                                            <input type="hidden" name="name" value="{{ snap.name }}">
                                                                            {% ifequal status 5 %}
                                                                                <button type="submit" class="btn btn-sm btn-primary" name="revert_snapshot" onclick="return confirm('Are you sure?')">
                                                                                    {% trans "Revert" %}
                                                                                </button>
                                                                            {% else %}
                                                                                <button type="button" class="btn btn-sm btn-primary disabled">
                                                                                    {% trans "Revert" %}
                                                                                </button>
                                                                            {% endifequal %}
                                                                        </form>
                                                                    </td>
                                                                    <td style="width:30px;">
                                                                        <form action="" method="post" role="form">{% csrf_token %}
                                                                            <input type="hidden" name="name" value="{{ snap.name }}">
                                                                            <button type="submit" class="btn btn-sm btn-danger" name="delete_snapshot" onclick="return confirm('{% trans "Are you sure?" %}')">
                                                                                {% trans "Delete" %}
                                                                            </button>
                                                                        </form>
                                                                    </td>
                                                                </tr>
                                                            {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    {% else %}
                                                        <p>{% trans "You do not have any snapshots" %}</p>
                                                    {% endif %}
                                                {% else %}
                                                    <p>{% trans "To restore snapshots you need Power Off the instance." %}</p>
                                                {% endifequal %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="settings">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active">
                                                <a href="#autostart" aria-controls="autostart" role="tab" data-toggle="tab">
                                                    {% trans "Autostart" %}
                                                </a>
                                            </li>
                                            <li role="presentation">
                                                <a href="#media" aria-controls="media" role="tab" data-toggle="tab">
                                                    {% trans "Media" %}
                                                </a>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="autostart">
                                                <p>Autostart</p>
                                            </div>
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered" id="media">
                                                <p>Cdrome</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="graphics">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active">
                                                <a href="#graps" aria-controls="graps" role="tab" data-toggle="tab">
                                                    {% trans "Real Time" %}
                                                </a>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="graps">
                                                <p>Graphics</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="undefine">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active">
                                                <a href="#destroy" aria-controls="destroy" role="tab" data-toggle="tab">
                                                    {% trans "Destroy Instance" %}
                                                </a>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="destroy">
                                                <p>Destroy Instance</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
{% endblock %}
{% block script %}
<script>
    function open_console() {
        window.open('{% url 'console' %}?token={{ compute_id }}-{{ uuid }}', '', 'width=850,height=485')
    }
</script>
{% endblock %}