{% load i18n %}
<div class="tab-pane" id="resize" role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" aria-label="Instance resize options">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#resizevm_cpu" type="button" role="tab" aria-controls="resizevm_cpu" aria-selected="true">
                {% trans "CPU" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#resizevm_mem" type="button" role="tab" aria-controls="resizevm_mem" aria-selected="false">
                {% trans "Memory" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#resizevm_disk" type="button" role="tab" aria-controls="resizevm_disk" aria-selected="false">
                {% trans "Disk" %}
            </button>
        </li>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane tab-pane-bordered active" id="resizevm_cpu">
            {% if request.user.is_superuser or request.user.is_staff or userinstance.is_change %}
                {% if instance.status == 5 or not instance.vcpus %}
                <form action="{% url 'instances:resizevm_cpu' instance.id %}" method="post" role="form" aria-label="Resize instance cpu form">{% csrf_token %}
                    <p class="fw-bold">{% trans "Logical host CPUs" %} : {{ vcpu_host }}</p>
                    <div class="row">
                        <label class="col-sm-4 col-form-label"> {% trans "Current Allocation" %}</label>
                        <div class="col-sm-4">
                            <select name="cur_vcpu" class="form-select">
                                {% for cpu in instance.vcpu_range %}
                                    {% if instance.cur_vcpu %}
                                        <option value="{{ cpu }}" {% if cpu == instance.cur_vcpu %}selected{% endif %}>{{ cpu }}</option>
                                    {% else %}
                                        <option value="{{ cpu }}" {% if cpu == instance.vcpu %}selected{% endif %}>{{ cpu }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-4 col-form-label">{% trans "Maximum Allocation" %}</label>
                        <div class="col-sm-4">
                            <select name="vcpu" class="form-select">
                                {% for cpu in instance.vcpu_range %}
                                    <option value="{{ cpu }}" {% if cpu == instance.vcpu %}selected{% endif %}>{{ cpu }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    {% if instance.status == 5 %}
                        <button type="submit" class="btn btn-lg btn-success float-end" name="resizevm_cpu">{% trans "Resize" %}</button>
                    {% else %}
                        <button class="btn btn-lg btn-success float-end disabled">{% trans "Resize" %}</button>
                    {% endif %}
                </form>
                <div class="clearfix"></div>
                {% else %}
                    <p class="fw-bold">{% trans "Logical Instance Active/Maximum CPUs" %} : {{ instance.cur_vcpu }} / {{ instance.vcpu }} </p>
                    <div class="col-sm-3"></div>
                    <div class="col-sm-6">
                        {% for id, vcpu in instance.vcpus.items %}
                            <form action="{% url 'instances:set_vcpu' instance.id %}" method="post" role="form" aria-label="Resize instance cpu form">{% csrf_token %}
                            <div class="d-grid col-sm-3">
                                <input name="id" value="{{ id }}" hidden/>
                                {% if vcpu.enabled == 'yes' and vcpu.hotpluggable == "yes" %}
                                        <button type="submit" class="btn btn-success" value="False" name="set_vcpu" title="{% trans "Disable" %}">{{ id }}</button>
                                {% elif vcpu.enabled == 'yes' and vcpu.hotpluggable == "no" %}
                                        <button type="button" class="btn btn-info" title="{% trans "Constant" %}">{{ id }}</button>
                                {% else %}
                                        <button type="submit" class="btn btn-secondary" value="True" name="set_vcpu" title="{% trans "Enable" %}">{{ id }}</button>
                                {% endif %}
                            </div>
                            </form>
                        {% endfor %}
                    </div>
                    <div class="col-sm-3"></div>
                {% endif %}
            {% else %}
                {% trans "You don't have permission for resizing instance" %}
                <button class="btn btn-lg btn-success float-end disabled">{% trans "Resize" %}</button>
            {% endif %}
            <div class="clearfix"></div>
        </div>
        <div role="tabpanel" class="tab-pane tab-pane-bordered" id="resizevm_mem">
            {% if request.user.is_superuser or request.user.is_staff or userinstance.is_change %}
                <form action="{% url 'instances:resize_memory' instance.id %}" method="post" role="form" aria-label="Resize instance memory form">
                    {% csrf_token %}
                    <p class="fw-bold">{% trans "Total host memory" %}: {{ memory_host|filesizeformat }}</p>
                    <div class="row">
                        <label class="col-sm-4 col-form-label">
                            {% trans "Current Allocation" %} ({% trans "MB" %})
                        </label>
                        <div class="col-sm-4 js-custom__container">
                            <select name="cur_memory" class="form-select js-custom__toggle">
                            {% for mem in memory_range %}
                                <option value="{{ mem }}" {% if mem == instance.cur_memory %}selected{% endif %}>{{ mem }}</option>
                            {% endfor %}
                            </select>
                            <input type="text" name="cur_memory_custom" class="form-select js-custom__toggle" style="display: none" />
                            <small><input type="checkbox" class="js-custom__checkbox" /> {% trans "Custom value" %}</small>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-4 col-form-label">
                            {% trans "Maximum Allocation" %} ({% trans "MB" %})
                        </label>
                        <div class="col-sm-4 js-custom__container">
                            <select name="memory" class="form-select js-custom__toggle">
                            {% for mem in memory_range %}
                                <option value="{{ mem }}" {% if mem == instance.memory %}selected{% endif %}>{{ mem }}</option>
                            {% endfor %}
                            </select>
                            <input type="text" name="memory_custom" class="form-select js-custom__toggle" style="display: none" />
                            <small><input type="checkbox" class="js-custom__checkbox" /> {% trans "Custom value" %}</small>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-lg btn-success float-end" name="resizevm_mem">{% trans "Resize" %}</button>
                </form>
            {% else %}
                {% trans "You don't have permission for resizing instance" %}
                <button class="btn btn-lg btn-success float-end disabled">{% trans "Resize" %}</button>
            {% endif %}
            <div class="clearfix"></div>
        </div>
        <div role="tabpanel" class="tab-pane tab-pane-bordered" id="resizevm_disk">
            {% if request.user.is_superuser or request.user.is_staff or userinstance.is_change %}
                <form action="{% url 'instances:resize_disk' instance.id %}" method="post" role="form" aria-label="Resize instance disk form">
                    {% csrf_token %}
                    <p class="fw-bold">{% trans "Disk allocation (GB)" %}:</p>
                    {% for disk in instance.disks %}
                    <div class="row">
                        <label class="col-sm-4 col-form-label">{% trans "Current Allocation" %} ({{ disk.dev }})</label>
                        {% if disk.storage is None %}
                        <div class="col-sm-4 js-custom__container">
                            <div class="alert alert-danger">
                                {% trans "Error getting disk info" %}
                            </div>
                        </div>
                        {% else %}
                        <div class="col-sm-4 js-custom__container">
                            <input type="number" name="disk_size_{{ disk.dev }}" class="form-control" value="{% widthratio disk.size 1073741824 1 %}" />
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% if instance.status == 5 %}
                        <button type="submit" class="btn btn-lg btn-success float-end" name="resizevm_disk">{% trans "Resize" %}</button>
                    {% else %}
                        <button class="btn btn-lg btn-success float-end disabled">{% trans "Resize" %}</button>
                    {% endif %}
                </form>
            {% else %}
                {% trans "You don't have permission for resizing instance" %}
                <button class="btn btn-lg btn-success float-end disabled">{% trans "Resize" %}</button>
            {% endif %}
            <div class="clearfix"></div>
        </div>
    </div>
</div>