{% extends "base.html" %}

{% block title %}Add Domain - Email Server Management{% endblock %}
{% block page_title %}Add New Domain{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-plus-circle me-2"></i>
                    Add New Domain
                </h5>
            </div>
            <div class="card-body">
                <form method="post">
                    <div class="mb-3">
                        <label for="domain_name" class="form-label">
                            <i class="bi bi-globe me-1"></i>
                            Domain Name
                        </label>
                        <input type="text" 
                               class="form-control" 
                               id="domain_name" 
                               name="domain_name" 
                               placeholder="example.com"
                               required
                               pattern="^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.?[a-zA-Z]{2,}$">
                        <div class="form-text">
                            Enter the domain name that will be used for sending emails (e.g., example.com)
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <h6 class="alert-heading">
                            <i class="bi bi-info-circle me-2"></i>
                            What happens next?
                        </h6>
                        <ul class="mb-0">
                            <li>Domain will be added to the system</li>
                            <li>DKIM key pair will be automatically generated</li>
                            <li>You'll need to configure DNS records</li>
                            <li>Add users or whitelist IPs for authentication</li>
                        </ul>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('email.domains_list') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left me-2"></i>
                            Back to Domains
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-2"></i>
                            Add Domain
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-question-circle me-2"></i>
                    Domain Requirements
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-success">
                            <i class="bi bi-check-circle me-1"></i>
                            Valid Examples
                        </h6>
                        <ul class="list-unstyled">
                            <li><code>example.com</code></li>
                            <li><code>mail.example.com</code></li>
                            <li><code>my-domain.org</code></li>
                            <li><code>company.co.uk</code></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-danger">
                            <i class="bi bi-x-circle me-1"></i>
                            Invalid Examples
                        </h6>
                        <ul class="list-unstyled">
                            <li><code>http://example.com</code></li>
                            <li><code>example</code></li>
                            <li><code>.example.com</code></li>
                            <li><code>example..com</code></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.getElementById('domain_name').addEventListener('input', function(e) {
        // Convert to lowercase and remove protocol if present
        let value = e.target.value.toLowerCase();
        value = value.replace(/^https?:\/\//, '');
        value = value.replace(/\/$/, '');
        e.target.value = value;
    });
</script>
{% endblock %}