{# ==============================================================================
   Formeleon - Multi-tenant Form Generator
   Author: Björn Runden <br@runden.net>
   Template: admin/tenants/create.html
   Description: Form for creating a new tenant.
   ============================================================================== #}

{% extends "base.html" %}

{% block title %}Create Tenant - Formeleon{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col-12">
            <h1><i class="bi bi-buildings"></i> Create Tenant</h1>
            <p class="text-muted">Add a new tenant to the system.</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-light">
                    <h5><i class="bi bi-pencil"></i> Tenant Details</h5>
                </div>
                <form method="POST" action="{{ url_for('admin.create_tenant') }}">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">Tenant Name *</label>
                                <input type="text" class="form-control" id="name" name="name" required placeholder="My Company">
                                <div class="form-text">Unique display name for the tenant</div>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="public_key" class="form-label">Public Key *</label>
                                <input type="text" class="form-control" id="public_key" name="public_key" required 
                                       placeholder="auto-generated-if-empty">
                                <div class="form-text">API key used by client snippets</div>
                            </div>
                            
                            <div class="col-12">
                                <label for="allowed_origins" class="form-label">Allowed Origins *</label>
                                <input type="text" class="form-control" id="allowed_origins" name="allowed_origins" 
                                       value="*" required placeholder="https://example.com,https://other.com">
                                <div class="form-text">Comma-separated list of allowed domains. Use * for all domains.</div>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="status" class="form-label">Status</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="active" selected>Active</option>
                                    <option value="suspended">Suspended</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                                <div class="form-text">Initial tenant status</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer bg-light d-flex justify-content-end">
                        <a href="{{ url_for('admin.list_tenants') }}" class="btn btn-outline-secondary me-2">
                            <i class="bi bi-arrow-left"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check"></i> Create Tenant
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header bg-light">
                    <h5><i class="bi bi-info-circle"></i> Information</h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-6">Public Key Usage:</dt>
                        <dd class="col-sm-6">Used in client JavaScript snippets for authentication</dd>
                        
                        <dt class="col-sm-6">Allowed Origins:</dt>
                        <dd class="col-sm-6">CORS and handshake validation</dd>
                        
                        <dt class="col-sm-6">Status:</dt>
                        <dd class="col-sm-6">Controls whether tenant can receive submissions</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Auto-generate public key if empty
$(document).ready(function() {
    const publicKeyInput = $('#public_key');
    
    // Generate a random public key if empty on page load
    if (!publicKeyInput.val().trim()) {
        publicKeyInput.val('pub_' + Math.random().toString(36).substring(2, 15) + 
                          Math.random().toString(36).substring(2, 15));
    }
});
</script>
{% endblock %}