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

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

<div class="row mt-4">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <strong>Site Name Transformation Rule</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-6">
                            <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 are evaluated first</small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <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.regex_pattern.id_for_label }}" class="form-label required">Regex Pattern</label>
                        {{ form.regex_pattern }}
                        {% if form.regex_pattern.errors %}
                            <div class="invalid-feedback d-block">{{ form.regex_pattern.errors }}</div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.regex_pattern.help_text }}</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="{{ form.site_name_template.id_for_label }}" class="form-label required">Site Name Template</label>
                        {{ form.site_name_template }}
                        {% if form.site_name_template.errors %}
                            <div class="invalid-feedback d-block">{{ form.site_name_template.errors }}</div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.site_name_template.help_text }}</small>
                    </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>Pattern:</strong> <code>^(.+)-(.+)-(.+)$</code><br>
                                <strong>Template:</strong> <code>{0} - {1} - {2}</code><br>
                                <strong>Transforms:</strong> asia-south-oil → asia - south - oil
                            </li>
                            <li>
                                <strong>Pattern:</strong> <code>^branch-(\d+)$</code><br>
                                <strong>Template:</strong> <code>Branch Office {0}</code><br>
                                <strong>Transforms:</strong> branch-001 → Branch Office 001
                            </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 %}

{% block javascript %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add Bootstrap form-control class to all form fields
    document.querySelectorAll('input[type="text"], input[type="number"], textarea').forEach(function(el) {
        el.classList.add('form-control');
    });
    document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
        el.classList.add('form-check-input');
    });
});
</script>
{% endblock %}