{% extends 'netbox_meraki/base.html' %}

{% block page_content %}
<div class="row">
    <div class="col-md-12">
        <h1>{% if object %}Edit{% else %}Add{% endif %} Prefix Filter Rule</h1>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-10 offset-md-1">
        <div class="card">
            <div class="card-header">
                <strong>Prefix Filter Configuration</strong>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="{{ form.name.id_for_label }}" class="form-label required">Name</label>
                        {{ form.name }}
                        {% if form.name.errors %}
                            <div class="invalid-feedback d-block">{{ form.name.errors }}</div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.name.help_text }}</small>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.filter_type.id_for_label }}" class="form-label required">Filter Type</label>
                                {{ form.filter_type }}
                                {% if form.filter_type.errors %}
                                    <div class="invalid-feedback d-block">{{ form.filter_type.errors }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Exclude or include only matching prefixes</small>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.priority.id_for_label }}" class="form-label required">Priority</label>
                                {{ form.priority }}
                                {% if form.priority.errors %}
                                    <div class="invalid-feedback d-block">{{ form.priority.errors }}</div>
                                {% endif %}
                                <small class="form-text text-muted">Lower values evaluated first</small>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="form-check mt-4">
                                    {{ form.enabled }}
                                    <label class="form-check-label" for="{{ form.enabled.id_for_label }}">
                                        Enable this rule
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.prefix_pattern.id_for_label }}" class="form-label">Prefix Pattern</label>
                        {{ form.prefix_pattern }}
                        {% if form.prefix_pattern.errors %}
                            <div class="invalid-feedback d-block">{{ form.prefix_pattern.errors }}</div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.prefix_pattern.help_text }}</small>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.prefix_length_filter.id_for_label }}" class="form-label required">Prefix Length Filter</label>
                                {{ form.prefix_length_filter }}
                                {% if form.prefix_length_filter.errors %}
                                    <div class="invalid-feedback d-block">{{ form.prefix_length_filter.errors }}</div>
                                {% endif %}
                                <small class="form-text text-muted">How to filter by prefix length</small>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.min_prefix_length.id_for_label }}" class="form-label">Min Prefix Length</label>
                                {{ form.min_prefix_length }}
                                {% if form.min_prefix_length.errors %}
                                    <div class="invalid-feedback d-block">{{ form.min_prefix_length.errors }}</div>
                                {% endif %}
                                <small class="form-text text-muted">{{ form.min_prefix_length.help_text }}</small>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="{{ form.max_prefix_length.id_for_label }}" class="form-label">Max Prefix Length</label>
                                {{ form.max_prefix_length }}
                                {% if form.max_prefix_length.errors %}
                                    <div class="invalid-feedback d-block">{{ form.max_prefix_length.errors }}</div>
                                {% endif %}
                                <small class="form-text text-muted">{{ form.max_prefix_length.help_text }}</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
                        {{ form.description }}
                        {% if form.description.errors %}
                            <div class="invalid-feedback d-block">{{ form.description.errors }}</div>
                        {% endif %}
                        <small class="form-text text-muted">Optional description of what this rule does</small>
                    </div>
                    
                    <div class="alert alert-info">
                        <strong>Examples:</strong>
                        <ul class="mb-0">
                            <li>
                                <strong>Exclude /32 host routes:</strong><br>
                                Filter Type: Exclude, Length Filter: Exact, Min Length: 32
                            </li>
                            <li>
                                <strong>Include only /24 subnets:</strong><br>
                                Filter Type: Include Only, Length Filter: Exact, Min Length: 24
                            </li>
                            <li>
                                <strong>Exclude 192.168.0.0/16 range:</strong><br>
                                Filter Type: Exclude, Pattern: 192.168.0.0/16
                            </li>
                            <li>
                                <strong>Include prefixes with length greater than /20:</strong><br>
                                Filter Type: Include Only, Length Filter: Greater, Min Length: 20
                            </li>
                            <li>
                                <strong>Include only /20 to /28 prefixes:</strong><br>
                                Filter Type: Include Only, Length Filter: Range, Min Length: 20, Max Length: 28
                            </li>
                        </ul>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <a href="{% url 'plugins:netbox_meraki:config' %}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}