{% load i18n %}
{% load bootstrap_icons %}
<a href="#AddInstance" type="button" class="btn btn-success btn-header float-end" data-bs-toggle="modal">
    <span aria-hidden="true">{% bs_icon 'plus-circle-fill'%} </span>
</a>

<!-- Modal pool -->
<div class="modal fade" id="AddInstance" tabindex="-1" role="dialog" aria-labelledby="AddInstanceModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Choose a compute for new instance" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" aria-label="Select compute for instance create form">{% csrf_token %}
                    <div class="row">
                        <table class="table">
                            <thead>
                                <tr style="cursor:default;pointer-events:none">
                                    <th>{% trans "Name" %}</th>
                                    <th>{% trans "VCPU" %}
                                    <th>{% trans "CPU Usage" %}</th>
                                    <th>{% trans "Memory" %}</th>
                                    <th>{% trans "Mem Usage" %}</th>
                                    <th>{% trans "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for compute in computes %}
                                    {% if compute.status is True %}
                                        <tr style="text-decoration: none">
                                            <td>{{ compute.name }}</td>
                                            <td>{{ compute.cpu_count }}</td>
                                            <td>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ compute.cpu_usage }}%"
                                                        aria-valuenow="{{ compute.cpu_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.cpu_usage }}%
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ compute.ram_size|filesizeformat }}</td>
                                            <td>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ compute.ram_usage }}%"
                                                        aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="col-1">
                                                <button class="btn btn-success btn-sm" type="button" onclick="goto_compute('{{ compute.id }}');">
                                                    {% trans "Choose" %}
                                                </button>
                                            </td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </form> 
            </div>
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->