{% extends 'generic/object.html' %}
{% load helpers %}
{% load proxbox_tags %}
{% load humanize %}
{% load i18n %}

{% block content %}
<div class="row mb-3">
    <div class="col-lg-6">
        <div class="card mb-3">
            <h5 class="card-header">{% trans "Proxmox Storage" %}</h5>
            <div class="card-body">
                <table class="table table-hover attr-table">
                    <tr>
                        <th scope="row">{% trans "Cluster" %}</th>
                        <td>{{ object.cluster }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Name" %}</th>
                        <td>{{ object.name }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Storage Type" %}</th>
                        <td>{{ object.storage_type|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Content" %}</th>
                        <td>{{ object.content|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Path" %}</th>
                        <td>{{ object.path|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Nodes" %}</th>
                        <td>{{ object.nodes|placeholder }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Shared" %}</th>
                        <td>{{ object.shared|yesno:"Yes,No" }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% trans "Enabled" %}</th>
                        <td>{{ object.enabled|yesno:"Yes,No" }}</td>
                    </tr>
                    {% if object.server %}
                    <tr>
                        <th scope="row">{% trans "Server" %}</th>
                        <td>{{ object.server }}</td>
                    </tr>
                    {% endif %}
                    {% if object.port %}
                    <tr>
                        <th scope="row">{% trans "Port" %}</th>
                        <td>{{ object.port }}</td>
                    </tr>
                    {% endif %}
                    {% if object.username %}
                    <tr>
                        <th scope="row">{% trans "Username" %}</th>
                        <td>{{ object.username }}</td>
                    </tr>
                    {% endif %}
                    {% if object.export %}
                    <tr>
                        <th scope="row">{% trans "Export" %}</th>
                        <td>{{ object.export }}</td>
                    </tr>
                    {% endif %}
                    {% if object.share %}
                    <tr>
                        <th scope="row">{% trans "Share" %}</th>
                        <td>{{ object.share }}</td>
                    </tr>
                    {% endif %}
                    {% if object.pool %}
                    <tr>
                        <th scope="row">{% trans "Pool" %}</th>
                        <td>{{ object.pool }}</td>
                    </tr>
                    {% endif %}
                    {% if object.datastore %}
                    <tr>
                        <th scope="row">{% trans "Datastore" %}</th>
                        <td>{{ object.datastore }}</td>
                    </tr>
                    {% endif %}
                    {% if object.mountpoint %}
                    <tr>
                        <th scope="row">{% trans "Mountpoint" %}</th>
                        <td>{{ object.mountpoint }}</td>
                    </tr>
                    {% endif %}
                    {% if object.format %}
                    <tr>
                        <th scope="row">{% trans "Format" %}</th>
                        <td>{{ object.format }}</td>
                    </tr>
                    {% endif %}
                    {% if object.prune_backups %}
                    <tr>
                        <th scope="row">{% trans "Prune Backups" %}</th>
                        <td>{{ object.prune_backups }}</td>
                    </tr>
                    {% endif %}
                    {% if object.max_protected_backups is not None %}
                    <tr>
                        <th scope="row">{% trans "Max Protected Backups" %}</th>
                        <td>{{ object.max_protected_backups }}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>

        <div class="card mt-3">
            <h5 class="card-header">{% trans "Storage Usage (Live)" %}</h5>
            <div class="card-body">
                {% if storage_usage %}
                    <table class="table table-hover attr-table mb-2">
                        <tr>
                            <th scope="row">{% trans "Used" %}</th>
                            <td>{{ storage_usage.used_label }} / {{ storage_usage.total_label }}</td>
                        </tr>
                        <tr>
                            <th scope="row">{% trans "Available" %}</th>
                            <td>{{ storage_usage.avail_label }}</td>
                        </tr>
                        <tr>
                            <th scope="row">{% trans "Usage" %}</th>
                            <td>{{ storage_usage.used_pct }}%</td>
                        </tr>
                        <tr>
                            <th scope="row">{% trans "Proxmox Content Rows" %}</th>
                            <td>{{ storage_content_count }}</td>
                        </tr>
                    </table>
                    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ storage_usage.used_pct|floatformat:0 }}">
                        <div class="progress-bar bg-warning" style="width: {{ storage_usage.used_pct }}%;"></div>
                    </div>
                {% elif storage_usage_detail %}
                    <div class="alert alert-warning mb-0" role="alert">{{ storage_usage_detail }}</div>
                {% else %}
                    <div class="text-muted">{% trans "No storage usage data returned from Proxmox API." %}</div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card mb-3">
            <h5 class="card-header">{% trans "Storage Summary" %}</h5>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-sm-4">
                        <div class="border rounded p-3 h-100">
                            <div class="text-muted small">{% trans "Virtual Disks" %}</div>
                            <div class="fw-semibold">{{ storage_summary.virtual_disks_count|default:0 }}</div>
                            <div class="text-muted small">{{ storage_summary.virtual_disks_size|default:0|filesizeformat }}</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="border rounded p-3 h-100">
                            <div class="text-muted small">{% trans "Backups" %}</div>
                            <div class="fw-semibold">{{ storage_summary.backups_count|default:0 }}</div>
                            <div class="text-muted small">{{ storage_summary.backups_size|default:0|filesizeformat }}</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="border rounded p-3 h-100">
                            <div class="text-muted small">{% trans "Snapshots" %}</div>
                            <div class="fw-semibold">{{ storage_summary.snapshots_count|default:0 }}</div>
                            <div class="text-muted small">{% trans "Linked to this storage" %}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% include 'inc/panels/tags.html' %}
        {% include 'inc/panels/custom_fields.html' %}
        {% include 'inc/panels/comments.html' %}
    </div>
</div>
{% endblock %}