{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Computes" %}{% endblock %}
{% block content %}
    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            {% include 'create_comp_block.html' %}
            <h2 class="page-header">{% trans "Computes" %}</h2>
        </div>
    </div>
    <!-- /.row -->

    {% include 'errors_block.html' %}

    <div class="row">
        {% if computes_info %}
            {% for compute in computes_info %}
                <div id="{{ compute.name }}" class="col-12 col-sm-4">
                    {% if compute.status is True %}
                    <div class="card border-success shadow h-100">
                        <div class="card-header bg-success">
                    {% else %}
                    <div class="card border-danger shadow h-100">
                        <div class="card-header bg-danger">
                    {% endif %}   
                            <h5 class="my-0 card-title">
                                {% if compute.status is True %}
                                    <a class="card-link text-light" href="{% url 'overview' compute.id %}"><strong>{{ compute.name }}</strong></a> 
                                {% else %}
                                    <span class="card-link text-light" href="#"><strong>{{ compute.name }}</strong></span> 
                                {% endif %}
                                <a class="card-link text-light float-right" data-toggle="modal" href="#editHost{{ compute.id }}" title="{% trans "Edit" %}">
                                    <i class="fa fa-cog"></i>
                                </a>
                            </h5>
                        </div>
                        <div class="card-body">
                            <dl class="row">
                                <dt class="col-4">{% trans "Status" %}</dt>
                                {% if compute.status %}
                                    <dd class="col-8">{% trans "Connected" %}</dd>
                                {% else %}
                                    <dd class="col-8">{% trans "Not Connected" %}</dd>
                                {% endif %}
                                <dt class="col-4">{% trans "Details" %}</dt>
                                {% if compute.details %}
                                    <dd class="col-8">{% trans compute.details %}</dd>
                                {% else %}
                                    <dd class="col-8">{% trans "No details available" %}</dd>
                                {% endif %}
                            </dl>

                            <!-- Modal Edit -->
                            <div class="modal fade" id="editHost{{ compute.id }}" tabindex="-1" role="dialog" aria-labelledby="editHostLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">{% trans "Edit connection" %}</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
                                        </div>
                                        {% if compute.type == 1 %}
                                            <form method="post" role="form" aria-label="Edit tcp host form">{% csrf_token %}
                                                <div class="modal-body">
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Label" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="hidden" name="host_id" value="{{ compute.id }}">
                                                            <input type="text" name="name" class="form-control" value="{{ compute.name }}" maxlength="20" required pattern="[a-zA-Z0-9\.\-_]+">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "FQDN / IP" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="hostname" class="form-control" value="{{ compute.hostname }}" required pattern="[a-z0-9\.\-_]+">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Username" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="login" class="form-control" value="{{ compute.login }}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Password" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="password" name="password" class="form-control" value="{{ compute.password }}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Details" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="details" class="form-control" placeholder="Details" value="{{ compute.details }}">
                                                        </div>
                                                    </div></div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-danger mr-auto" name="host_del">
                                                        {% trans "Delete" %}
                                                    </button>
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                        {% trans "Close" %}
                                                    </button>
                                                    <button type="submit" class="btn btn-primary" name="host_edit" autofocus>
                                                        {% trans "Change" %}
                                                    </button>
                                                </div>
                                            </form>
                                        {% endif %}
                                        {% if compute.type == 2 %}
                                            <form method="post" role="form" aria-label="Edit ssh host form">{% csrf_token %}
                                                <div class="modal-body">
                                                    <p class="modal-body">{% trans "Need create ssh <a href='https://github.com/retspen/webvirtmgr/wiki/Setup-SSH-Authorization'>authorization key</a>. If you have another SSH port on your server, you can add IP:PORT like '192.168.1.1:2222'." %}</p>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Label" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="hidden" name="host_id" value="{{ compute.id }}">
                                                            <input type="text" name="name" class="form-control" value="{{ compute.name }}" maxlength="20" required pattern="[a-z0-9\.\-_]+">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "FQDN / IP" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="hostname" class="form-control" value="{{ compute.hostname }}" required pattern="[a-z0-9\:\.\-_]+">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Username" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="login" class="form-control" value="{{ compute.login }}">
                                                            <input type="hidden" name="password" value="{{ compute.password }}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Details" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="details" class="form-control" placeholder="Details" value="{{ compute.details }}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-danger mr-auto" name="host_del">
                                                        {% trans "Delete" %}
                                                    </button>
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                        {% trans "Close" %}
                                                    </button>
                                                    <button type="submit" class="btn btn-primary" name="host_edit">
                                                        {% trans "Change" %}
                                                    </button>
                                                </div>
                                            </form>
                                        {% endif %}
                                        {% if compute.type == 3 %}
                                            <form method="post" role="form" aria-label="Edit tls host form">{% csrf_token %}
                                                <div class="modal-body">
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Label" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="hidden" name="host_id" value="{{ compute.id }}">
                                                            <input type="text" name="name" class="form-control" value="{{ compute.name }}" maxlength="20" required pattern="[a-z0-9\.\-_]+">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "FQDN / IP" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="hostname" class="form-control" value="{{ compute.hostname }}" required pattern="[a-z0-9\:\.\-_]+">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Username" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="login" class="form-control" placeholder="{% trans "Name" %}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Password" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="password" name="password" class="form-control" value="{{ compute.password }}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Details" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="details" class="form-control" placeholder="Details" value="{{ compute.details }}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-danger mr-auto" name="host_del">
                                                        {% trans "Delete" %}
                                                    </button>
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                        {% trans "Close" %}
                                                    </button>
                                                    <button type="submit" class="btn btn-primary" name="host_edit">
                                                        {% trans "Change" %}
                                                    </button>
                                                </div>
                                            </form>
                                        {% endif %}
                                        {% if compute.type == 4 %}
                                            <form method="post" role="form" aria-label="Edit/delete host form">{% csrf_token %}
                                                <div class="modal-body">
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Label" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="hidden" name="host_id" value="{{ compute.id }}">
                                                            <input type="text" name="name" class="form-control" value="{{ compute.name }}" maxlength="20" required pattern="[a-z0-9\.\-_]+">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label class="col-sm-4 col-form-label">{% trans "Details" %}</label>
                                                        <div class="col-sm-6">
                                                            <input type="text" name="details" class="form-control" placeholder="Details" value="{{ compute.details }}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-danger mr-auto" name="host_del">
                                                        {% trans "Delete" %}
                                                    </button>
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                        {% trans "Close" %}
                                                    <button type="submit" class="btn btn-primary" name="host_edit">
                                                        {% trans "Change" %}
                                                    </button>
                                                </div>
                                            </form>
                                        {% endif %}
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
           <div class="col-lg-12">
                <div class="alert alert-warning alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <i class="fa fa-exclamation-triangle"></i> <strong>{% trans "Warning" %}:</strong> {% trans "Hypervisor doesn't have any Computes" %}
                </div>
           </div>
        {% endif %}
    </div>
{% endblock %}