{% extends 'base.html' %}

{% block title %}Postgres Clusters - Postgres Handholder{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="fas fa-server me-2"></i>Postgres Clusters</h1>
    <a href="{% url 'clusters:cluster_create' %}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i>Create Cluster
    </a>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-4">
                <label for="status" class="form-label">Status</label>
                <select name="status" id="status" class="form-select">
                    <option value="">All Statuses</option>
                    {% for value, label in status_choices %}
                        <option value="{{ value }}" {% if request.GET.status == value %}selected{% endif %}>
                            {{ label }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4 d-flex align-items-end">
                <button type="submit" class="btn btn-outline-primary me-2">
                    <i class="fas fa-filter me-1"></i>Filter
                </button>
                <a href="{% url 'clusters:cluster_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i>Clear
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Clusters List -->
{% if page_obj %}
    <div class="row">
        {% for cluster in page_obj %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ cluster.name }}</h5>
                        <span class="badge bg-{% if cluster.status == 'running' %}success{% elif cluster.status == 'stopped' %}secondary{% elif cluster.status == 'error' %}danger{% else %}warning{% endif %}">
                            {{ cluster.get_status_display }}
                        </span>
                    </div>
                    <div class="card-body">
                        <p class="card-text text-muted">{{ cluster.description|truncatewords:20 }}</p>
                        
                        <div class="row text-center mb-3">
                            <div class="col-4">
                                <small class="text-muted">Type</small>
                                <div>{{ cluster.get_cluster_type_display }}</div>
                            </div>
                            <div class="col-4">
                                <small class="text-muted">Version</small>
                                <div>PostgreSQL {{ cluster.postgres_version }}</div>
                            </div>
                            <div class="col-4">
                                <small class="text-muted">Deployment</small>
                                <div>{{ cluster.get_deployment_type_display }}</div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted">
                                Created {{ cluster.created_at|date:"M j, Y" }}
                            </small>
                            <div class="btn-group" role="group">
                                <a href="{% url 'clusters:cluster_detail' cluster.id %}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'clusters:cluster_edit' cluster.id %}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-edit"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
        <nav aria-label="Clusters pagination">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}

{% else %}
    <div class="text-center py-5">
        <i class="fas fa-server fa-3x text-muted mb-3"></i>
        <h3 class="text-muted">No clusters found</h3>
        <p class="text-muted">Get started by creating your first Postgres cluster.</p>
        <a href="{% url 'clusters:cluster_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Create Your First Cluster
        </a>
    </div>
{% endif %}
{% endblock %}