{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
&rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
&rsaquo; {{ title }}
</div>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">{{ title }}</h3>
    </div>
    <div class="card-body">
        <p class="mb-3">You are about to update <strong>{{ queryset.count }}</strong> compute plan(s). Please select the fields you want to update:</p>

        <!-- Selected items display -->
        <div class="alert alert-info" role="alert">
            <h6 class="alert-heading">Selected Compute Plans:</h6>
            <div class="row">
                {% for obj in queryset %}
                <div class="col-md-6 mb-1">
                    <small><i class="fas fa-server me-1"></i>{{ obj.name }} ({{ obj.cloud_provider }})</small>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Update form -->
        <form method="post">
            {% csrf_token %}
            
            <!-- Pass selected items -->
            {% for obj in queryset %}
            <input type="hidden" name="{{ action_checkbox_name }}" value="{{ obj.pk }}">
            {% endfor %}
            <input type="hidden" name="action" value="mass_update_compute_plans">
            <input type="hidden" name="post" value="yes">
            
            <!-- Form fields -->
            <div class="row mb-3">
                <label for="{{ form.active.id_for_label }}" class="col-sm-3 col-form-label">Active Status:</label>
                <div class="col-sm-9">
                    {{ form.active }}
                    {% if form.active.help_text %}
                    <div class="form-text">{{ form.active.help_text }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <label for="{{ form.term.id_for_label }}" class="col-sm-3 col-form-label">Term:</label>
                <div class="col-sm-9">
                    {{ form.term }}
                    {% if form.term.help_text %}
                    <div class="form-text">{{ form.term.help_text }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <label for="{{ form.group.id_for_label }}" class="col-sm-3 col-form-label">Group:</label>
                <div class="col-sm-9">
                    {{ form.group }}
                    {% if form.group.help_text %}
                    <div class="form-text">{{ form.group.help_text }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <label for="{{ form.valid_from.id_for_label }}" class="col-sm-3 col-form-label">Valid From:</label>
                <div class="col-sm-9">
                    {{ form.valid_from }}
                    {% if form.valid_from.help_text %}
                    <div class="form-text">{{ form.valid_from.help_text }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="row mb-3">
                <label for="{{ form.valid_to.id_for_label }}" class="col-sm-3 col-form-label">Valid To:</label>
                <div class="col-sm-9">
                    {{ form.valid_to }}
                    {% if form.valid_to.help_text %}
                    <div class="form-text">{{ form.valid_to.help_text }}</div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Submit buttons -->
            <div class="row">
                <div class="col-sm-9 offset-sm-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Update Compute Plans
                    </button>
                    <a href="{% url opts|admin_urlname:'changelist' %}" class="btn btn-secondary ms-2">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selects = document.querySelectorAll('select');
    const inputs = document.querySelectorAll('input[type="date"]');
    
    selects.forEach(select => {
        select.classList.add('form-select');
    });
    
    inputs.forEach(input => {
        input.classList.add('form-control');
    });
});
</script>
{% endblock %}