{{define "title"}}Edit DKIM Selector{{end}}

{{define "content"}}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0"><i class="bi bi-pencil me-2"></i>Edit DKIM Selector</h4>
                    <a href="/pymta-manager/dkim" class="btn btn-light btn-sm"><i class="bi bi-arrow-left me-1"></i>Back to DKIM Keys</a>
                </div>
                <div class="card-body">
                    <form method="POST" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="selector" class="form-label"><i class="bi bi-key me-1"></i>DKIM Selector</label>
                            <input type="text" class="form-control" id="selector" name="selector" value="{{.dkim_key.Selector}}" placeholder="default" pattern="^[a-zA-Z0-9_-]+$" required>
                            <div class="invalid-feedback">Please provide a valid selector (letters, numbers, hyphens, and underscores only).</div>
                            <div class="form-text"><i class="bi bi-info-circle me-1"></i>The selector is used in DNS records to identify this DKIM key (e.g., "selector._domainkey.{{.domain.DomainName}}")</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="alert alert-info">
                                    <h6><i class="bi bi-info-circle me-1"></i>Current Information</h6>
                                    <p class="mb-1"><strong>Domain:</strong> {{.domain.DomainName}}</p>
                                    <p class="mb-1"><strong>Current Selector:</strong> {{.dkim_key.Selector}}</p>
                                    <p class="mb-1"><strong>Status:</strong> {{if .dkim_key.IsActive}}<span class="badge bg-success">Active</span>{{else}}<span class="badge bg-danger">Inactive</span>{{end}}</p>
                                    <p class="mb-0"><strong>Created:</strong> {{strftime "%Y-%m-%d %H:%M:%S" .dkim_key.CreatedAt}}</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-warning">
                                    <h6><i class="bi bi-exclamation-triangle me-1"></i>Important Note</h6>
                                    <p class="mb-0">Changing the selector will require updating your DNS records to match the new selector name.</p>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <a href="/pymta-manager/dkim" class="btn btn-secondary"><i class="bi bi-x me-1"></i>Cancel</a>
                            <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Update Selector</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-header bg-info text-white"><h5 class="mb-0"><i class="bi bi-dns me-2"></i>DNS Record Information</h5></div>
                <div class="card-body">
                    <div class="alert alert-light">
                        <h6>Current DNS Record</h6>
                        <p class="mb-2"><strong>Name:</strong> <code>{{.dkim_key.Selector}}._domainkey.{{.domain.DomainName}}</code></p>
                        <p class="mb-0"><strong>Type:</strong> TXT</p>
                    </div>
                    <p class="text-muted"><i class="bi bi-lightbulb me-1"></i><strong>Tip:</strong> After changing the selector, update your DNS provider to use the new record name. The value stays the same.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
document.getElementById('selector').addEventListener('input', function(e) {
    const selectorRegex = /^[a-zA-Z0-9_-]+$/;
    if (e.target.value && !selectorRegex.test(e.target.value)) {
        e.target.setCustomValidity('Selector must contain only letters, numbers, hyphens, and underscores');
    } else {
        e.target.setCustomValidity('');
    }
});
</script>
{{end}}