<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PKI Manager</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/fontawesome/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-shield-alt"></i>ZEN6 PKI Manager - WIP</h1>
            <p>Manage your Certificate Authority infrastructure</p>
            <nav>
                <button class="nav-btn" data-tab="dashboard">
                    <i class="fas fa-home"></i> Dashboard
                </button>
                <button class="nav-btn" data-tab="cas">
                    <i class="fas fa-certificate"></i> CAs
                </button>
                <button class="nav-btn" data-tab="subcas">
                    <i class="fas fa-sitemap"></i> Sub CAs
                </button>
                <button class="nav-btn" data-tab="certificates">
                    <i class="fas fa-key"></i> Certificates
                </button>
            </nav>
        </header>

        <main>
            <!-- Dashboard Tab -->
            <div id="dashboardTab" class="tab-content">
                <div id="dashboardContent">
                    <!-- Dashboard content will be loaded here -->
                    <div style="text-align: center; padding: 50px;">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p>Loading dashboard...</p>
                    </div>
                </div>
            </div>

            <!-- CAs Tab -->
            <div id="casTab" class="tab-content hidden">
                <div id="casContent">
                    <div style="text-align: center; padding: 50px;">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p>Loading CAs...</p>
                    </div>
                </div>
            </div>

            <!-- Sub CAs Tab -->
            <div id="subcasTab" class="tab-content hidden">
                <div id="subcasContent">
                    <div style="text-align: center; padding: 50px;">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p>Loading Sub CAs...</p>
                    </div>
                </div>
            </div>

            <!-- Certificates Tab -->
            <div id="certificatesTab" class="tab-content hidden">
                <div id="certsContent">
                    <div style="text-align: center; padding: 50px;">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p>Loading Certificates...</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Create CA Modal -->
    <div id="createCAModal" class="modal hidden">
        <div class="modal-content">
            <button class="close-btn" onclick="pki.hideModal()" style="background: none; border: none; float: right; font-size: 24px; cursor: pointer;">
                <i class="fas fa-times"></i>
            </button>
            <h2>Create Root CA</h2>
            <form id="createCAForm">
                <div class="form-group">
                    <label for="caName">Name</label>
                    <input type="text" id="caName" name="name" required>
                </div>
                <div class="form-group">
                    <label for="caCommonName">Common Name</label>
                    <input type="text" id="caCommonName" name="common_name" required>
                </div>
                <div class="form-group">
                    <label for="caOrganization">Organization</label>
                    <input type="text" id="caOrganization" name="organization" required>
                </div>
                <div class="form-group">
                    <label for="caOrganization_unit">Organizational Unit</label>
                    <input type="text" id="caOrganization_unit" name="organization_unit" required>
                </div>
                <div class="form-group">
                    <label for="caCountry">Country (2 letters)</label>
                    <input type="text" id="caCountry" name="country" maxlength="2" required>
                </div>
                <div class="form-group">
                    <label for="caProvince">Province/State</label>
                    <input type="text" id="caProvince" name="province">
                </div>
                <div class="form-group">
                    <label for="caLocality">Locality/City</label>
                    <input type="text" id="caLocality" name="locality">
                </div>
                <div class="form-group">
                    <label for="caStreetAddress">StreetAddress/City</label>
                    <input type="text" id="caStreetAddress" name="street_address">
                </div>
                <div class="form-group">
                    <label for="caPostalCode">PostalCode</label>
                    <input type="text" id="caPostalCode" name="postal_code">
                </div>
                <div class="form-group">
                    <label for="caEmail">Email</label>
                    <input type="email" id="caEmail" name="email">
                </div>
                <div class="form-group">
                    <label for="caKeySize">Key Size</label>
                    <select id="caKeySize" name="key_sizeq" required>
                        <option value="2048">2048 bits</option>
                        <option value="4096" selected>4096 bits</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="caValidYears">Validity (Years)</label>
                    <input type="number" id="caValidYears" name="valid_years" value="10" min="1" max="20" required>
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="caIsRoot" name="is_root" value="true" checked>
                        Is Root CA
                    </label>
                </div>
                <button type="submit" class="btn">Create CA</button>
            </form>
        </div>
    </div>

    <!-- Create Sub CA Modal -->
    <div id="createSubCAModal" class="modal hidden">
        <div class="modal-content">
            <button class="close-btn" onclick="pki.hideModal()" style="background: none; border: none; float: right; font-size: 24px; cursor: pointer;">
                <i class="fas fa-times"></i>
            </button>
            <h2>Create Sub CA</h2>
            <form id="createSubCAForm">
                <div class="form-group">
                    <label for="subcaName">Name</label>
                    <input type="text" id="subcaName" name="name" required>
                </div>
                <div class="form-group">
                    <label for="subcaCommonName">Common Name</label>
                    <input type="text" id="subcaCommonName" name="common_name" required>
                </div>
                <div class="form-group">
                    <label for="subcaOrganization">Organization</label>
                    <input type="text" id="subcaOrganization" name="organization" required>
                </div>
                <div class="form-group">
                    <label for="subcaOrganization_unit">Organizational Unit</label>
                    <input type="text" id="subcaOrganization_unit" name="organization_unit" required>
                </div>
                <div class="form-group">
                <label for="subcaEmail">Email (optional)</label>
                <input type="email" id="subcaEmail" name="email" placeholder="Optional email address">
                </div>
                <div class="form-group">
                    <label for="subcaCountry">Country (2 letters)</label>
                    <input type="text" id="subcaCountry" name="country" maxlength="2" required>
                </div>
                <div class="form-group">
                    <label for="subcaProvince">Province/State</label>
                    <input type="text" id="subcaProvince" name="province">
                </div>
                <div class="form-group">
                    <label for="subcaLocality">Locality/City</label>
                    <input type="text" id="subcaLocality" name="locality">
                </div>
                <div class="form-group">
                    <label for="subcaParentCA">Parent CA</label>
                    <select id="parentCA" name="parent_ca_id" required></select>
                </div>
                <div class="form-group">
                    <label for="subcaKeySize">Key Size</label>
                    <select id="subcaKeySize" name="key_size" required>
                        <option value="2048">2048 bits</option>
                        <option value="4096" selected>4096 bits</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="subcaValidYears">Validity (Years)</label>
                    <input type="number" id="subcaValidYears" name="valid_years" value="5" min="1" max="10" required>
                </div>
                <button type="submit" class="btn">Create Sub CA</button>
            </form>
        </div>
    </div>
    <!-- Create Certificate Modal -->

    <div id="createCertModal" class="modal hidden">
        <div class="modal-content" style="max-width: 600px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h2 style="margin: 0;">Create Certificate</h2>
                <button class="close-btn" onclick="pki.hideModal()" 
                        style="background: none; border: none; font-size: 24px; cursor: pointer; color: #666;">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="createCertForm">
                <div class="form-group">
                    <label for="certCommonName">Common Name *</label>
                    <input type="text" id="certCommonName" name="common_name" required 
                        placeholder="e.g., server.example.com">
                </div>
                
                <div class="form-group">
                    <label for="certType">Certificate Type *</label>
                    <select id="certType" name="type" required>
                        <option value="">-- Select Type --</option>
                        <option value="server">Server Certificate</option>
                        <option value="client">Client Certificate</option>
                    </select>
                </div>
                
                <!-- IMPORTANT: Ce dropdown doit avoir l'ID "issuerCA" -->
                <div class="form-group">
                    <label for="issuerCA">Issuer (CA or Sub CA) *</label>
                    <select id="issuerCA" name="issuer_ca_id" required 
                            style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                        <option value="">-- Loading issuers... --</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="certDNSNames">DNS Names (optional, comma-separated)</label>
                    <input type="text" id="certDNSNames" name="dns_names" 
                        placeholder="e.g., example.com, www.example.com">
                </div>
                
                <div class="form-group">
                    <label for="certIPs">IP Addresses (optional, comma-separated)</label>
                    <input type="text" id="certIPs" name="ip_addresses" 
                        placeholder="e.g., 192.168.1.1, 10.0.0.1">
                </div>
                
                <div class="form-group">
                    <label for="certKeySize">Key Size *</label>
                    <select id="certKeySize" name="key_size" required>
                        <option value="2048">2048 bits (Recommended)</option>
                        <option value="4096">4096 bits (High Security)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="certValidDays">Validity Period (Days) *</label>
                    <input type="number" id="certValidDays" name="valid_days" 
                        value="365" min="1" max="3650" required>
                </div>
                
                <div style="display: flex; gap: 10px; margin-top: 30px;">
                    <button type="submit" class="btn" 
                            style="flex: 1; padding: 12px; background: #667eea; color: white;">
                        <i class="fas fa-plus"></i> Create Certificate
                    </button>
                    <button type="button" class="btn" onclick="pki.hideModal()"
                            style="padding: 12px; background: #ccc; color: #333;">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- View Details Modal -->
    <div id="viewModal" class="modal hidden">
        <div class="modal-content">
            <button class="close-btn" onclick="pki.hideModal()" style="background: none; border: none; float: right; font-size: 24px; cursor: pointer;">
                <i class="fas fa-times"></i>
            </button>
            <h2>View Details</h2>
            <div class="modal-body">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html>