{% extends "base.html" %}
{% set active_page = 'account' %}

{% block title %}Account Settings - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container">
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Account Settings</h1>
        <p class="page-subtitle">Manage your account information and preferences</p>
    </div>
    
    <div class="grid grid-2 gap-xl">
        <!-- Profile Information -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-user"></i> Profile Information</h3>
            <form id="profile-form">
                <div class="form-group">
                    <label class="form-label">Customer Name</label>
                    <input type="text" class="form-control" value="{{ customer.customer_name | default('') }}" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">Email Address</label>
                    <input type="email" class="form-control" value="{{ customer.email | default('') }}" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">Customer ID</label>
                    <input type="text" class="form-control" value="{{ customer.customer_id | default('') }}" readonly>
                    <small class="form-help">This is your unique identifier in the system</small>
                </div>
                <div class="form-group">
                    <label class="form-label">S3 Bucket</label>
                    <input type="text" class="form-control" value="s3://{{ customer.s3_bucket | default('') }}" readonly>
                </div>
            </form>
        </div>
        
        <!-- Session Debug Info -->
        {% if session_info %}
        <div class="card" style="background: #fff3cd; border: 1px solid #ffc107;">
            <h3 class="card-title"><i class="fas fa-bug"></i> Session Debug Info</h3>
            <dl style="margin: 0; font-family: monospace; font-size: 0.85rem;">
                <div class="d-flex justify-between mb-sm">
                    <dt>Session Email:</dt>
                    <dd>{{ session_info.session_user_email | default('None') }}</dd>
                </div>
                <div class="d-flex justify-between mb-sm">
                    <dt>Session Customer ID:</dt>
                    <dd>{{ session_info.session_customer_id | default('None') }}</dd>
                </div>
                <div class="d-flex justify-between mb-sm">
                    <dt>Session Logged In:</dt>
                    <dd>{{ session_info.session_logged_in | default('None') }}</dd>
                </div>
                <div class="d-flex justify-between mb-sm">
                    <dt>DB Customer ID:</dt>
                    <dd>{{ db_customer_id | default('None') }}</dd>
                </div>
                <div class="d-flex justify-between mb-sm">
                    <dt>Template Customer ID:</dt>
                    <dd>{{ customer.customer_id | default('None') }}</dd>
                </div>
            </dl>
        </div>
        {% endif %}

        <!-- Resource Quotas -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-tachometer-alt"></i> Resource Quotas</h3>
            <div class="mb-lg">
                <div class="d-flex justify-between mb-sm">
                    <span>Max Concurrent Worksets</span>
                    <span class="text-bold">{{ customer.max_concurrent_worksets | default(10) }}</span>
                </div>
                <div class="progress">
                    <div class="progress-bar primary" style="width: 0%"></div>
                </div>
            </div>
            <div class="mb-lg">
                <div class="d-flex justify-between mb-sm">
                    <span>Storage Quota</span>
                    <span class="text-bold">{{ customer.max_storage_gb | default(500) }} GB</span>
                </div>
                <div class="progress">
                    <div class="progress-bar primary" style="width: 0%"></div>
                </div>
            </div>
            <p class="text-muted text-sm">
                <i class="fas fa-info-circle"></i>
                Contact support to request quota increases.
            </p>
        </div>
        
        <!-- Billing Information -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-credit-card"></i> Billing Information</h3>
            <dl style="margin: 0;">
                <div class="d-flex justify-between mb-md">
                    <dt class="text-muted">Billing Account ID</dt>
                    <dd>{{ customer.billing_account_id | default('Not configured') }}</dd>
                </div>
                <div class="d-flex justify-between mb-md">
                    <dt class="text-muted">Cost Center (chargeback tag)</dt>
                    <dd>{{ customer.cost_center | default('N/A') }}</dd>
                </div>
                <div class="d-flex justify-between mb-md">
                    <dt class="text-muted">Created</dt>
                    <dd>{{ customer.created_at | default('Unknown') }}</dd>
                </div>
            </dl>
            <a href="/portal/usage" class="btn btn-outline mt-md">
                <i class="fas fa-chart-line"></i> View Usage & Billing
            </a>
        </div>
        
        <!-- Security Settings -->
        <div class="card">
            <h3 class="card-title"><i class="fas fa-shield-alt"></i> Security</h3>
            <div class="mb-lg">
                <h4 class="text-md mb-sm">Password</h4>
                <p class="text-muted text-sm mb-md">Last changed: Never</p>
                <button class="btn btn-outline" onclick="showChangePassword()">
                    <i class="fas fa-key"></i> Change Password
                </button>
            </div>
            <div class="mb-lg">
                <h4 class="text-md mb-sm">API Access</h4>
                <p class="text-muted text-sm mb-md">Generate API tokens for programmatic access</p>
                <button class="btn btn-outline" onclick="showApiTokens()">
                    <i class="fas fa-code"></i> Manage API Tokens
                </button>
            </div>
        </div>
    </div>
    
    <!-- Environment Variables Section -->
    <div class="card mt-xl">
        <h3 class="card-title"><i class="fas fa-cogs"></i> Environment Variables</h3>
        <p class="text-muted mb-md">All environment variables used in the Ursa system</p>

        <!-- Tabs for different categories -->
        <div class="tabs mb-lg">
            <div class="tabs-header">
                <button class="tab-button active" onclick="switchTab(event, 'aws-vars')">AWS Configuration</button>
                <button class="tab-button" onclick="switchTab(event, 'control-vars')">Control Bucket</button>
                <button class="tab-button" onclick="switchTab(event, 'tapdb-vars')">TapDB</button>
                <button class="tab-button" onclick="switchTab(event, 'cognito-vars')">Cognito Auth</button>
                <button class="tab-button" onclick="switchTab(event, 'api-vars')">API Configuration</button>
                <button class="tab-button" onclick="switchTab(event, 's3-vars')">S3 & Storage</button>
                <button class="tab-button" onclick="switchTab(event, 'notifications-vars')">Notifications</button>
                <button class="tab-button" onclick="switchTab(event, 'other-vars')">Other</button>
            </div>

            <!-- AWS Configuration Tab -->
            <div id="aws-vars" class="tab-content active">
                <h4 class="mb-md">AWS Credentials & Configuration</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>AWS_PROFILE</code></td>
                                <td>{% if env_vars.AWS_PROFILE %}<span class="env-value set">{{ env_vars.AWS_PROFILE }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>AWS profile name from ~/.aws/credentials</td>
                            </tr>
                            <tr>
                                <td><code>AWS_DEFAULT_REGION</code></td>
                                <td>{% if env_vars.AWS_DEFAULT_REGION %}<span class="env-value set">{{ env_vars.AWS_DEFAULT_REGION }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>AWS region for services (S3, TapDB, etc.)</td>
                            </tr>
                            <tr>
                                <td><code>AWS_REGION</code></td>
                                <td>{% if env_vars.AWS_REGION %}<span class="env-value set">{{ env_vars.AWS_REGION }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Alternative AWS region variable</td>
                            </tr>
                            <tr>
                                <td><code>AWS_ACCESS_KEY_ID</code></td>
                                <td>{% if env_vars.AWS_ACCESS_KEY_ID %}<span class="env-value set">{{ env_vars.AWS_ACCESS_KEY_ID }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>AWS access key (alternative to profile)</td>
                            </tr>
                            <tr>
                                <td><code>AWS_SECRET_ACCESS_KEY</code></td>
                                <td>{% if env_vars.AWS_SECRET_ACCESS_KEY %}<span class="env-value set">{{ env_vars.AWS_SECRET_ACCESS_KEY }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>AWS secret key (alternative to profile)</td>
                            </tr>
                            <tr>
                                <td><code>AWS_ACCOUNT_ID</code></td>
                                <td>{% if env_vars.AWS_ACCOUNT_ID %}<span class="env-value set">{{ env_vars.AWS_ACCOUNT_ID }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>AWS account ID (retrieved from STS)</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Control Bucket Tab -->
            <div id="control-vars" class="tab-content">
                <h4 class="mb-md">Control Bucket (Monitor Bucket) Configuration</h4>
                <div class="alert alert-info mb-md">
                    <strong>Note:</strong> The control bucket is where worksets are registered and managed. It's separate from customer data buckets.
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="3" class="text-center text-muted">
                                    <em>S3 buckets are now discovered from cluster tags.</em><br>
                                    <small>Each cluster has an <code>aws-parallelcluster-monitor-bucket</code> tag that specifies its bucket.</small>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="alert alert-info mt-md">
                    <strong>Bucket Configuration:</strong>
                    <p class="mb-0">S3 buckets are automatically discovered from the cluster you select during workset creation. Each ParallelCluster has a tag <code>aws-parallelcluster-monitor-bucket</code> that specifies its associated bucket.</p>
                </div>
            </div>

            <!-- TapDB Tab -->
            <div id="tapdb-vars" class="tab-content">
                <h4 class="mb-md">TapDB Configuration</h4>
                <div class="alert alert-info mb-md">
                    <strong>Note:</strong> TapDB is authoritative for workset state, locking, customer ownership, and manifests.
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
	                        </thead>
	                        <tbody>
	                            <tr>
	                                <td><code>TAPDB_STRICT_NAMESPACE</code></td>
	                                <td>{% if env_vars.TAPDB_STRICT_NAMESPACE %}<span class="env-value set">{{ env_vars.TAPDB_STRICT_NAMESPACE }}</span>{% else %}<span class="env-value not-set">not set</span>{% endif %}</td>
	                                <td>Enable strict namespace config resolution (recommended: <code>1</code>)</td>
	                            </tr>
	                            <tr>
	                                <td><code>TAPDB_ENV</code></td>
	                                <td>{% if env_vars.TAPDB_ENV %}<span class="env-value set">{{ env_vars.TAPDB_ENV }}</span>{% else %}<span class="env-value not-set">not set</span>{% endif %}</td>
	                                <td>TapDB environment selector (dev|test|prod)</td>
	                            </tr>
	                            <tr>
	                                <td><code>TAPDB_DATABASE_NAME</code></td>
	                                <td>{% if env_vars.TAPDB_DATABASE_NAME %}<span class="env-value set">{{ env_vars.TAPDB_DATABASE_NAME }}</span>{% else %}<span class="env-value not-set">not set</span>{% endif %}</td>
	                                <td>TapDB namespace database-name (required)</td>
	                            </tr>
	                            <tr>
	                                <td><code>TAPDB_CLIENT_ID</code></td>
	                                <td>{% if env_vars.TAPDB_CLIENT_ID %}<span class="env-value set">{{ env_vars.TAPDB_CLIENT_ID }}</span>{% else %}<span class="env-value not-set">not set</span>{% endif %}</td>
	                                <td>TapDB namespace client-id (required)</td>
	                            </tr>
	                            <tr>
	                                <td><code>TAPDB_CONFIG_PATH</code></td>
	                                <td>{% if env_vars.TAPDB_CONFIG_PATH %}<span class="env-value set">{{ env_vars.TAPDB_CONFIG_PATH }}</span>{% else %}<span class="env-value not-set">not set</span>{% endif %}</td>
	                                <td>Optional override path for TapDB config file</td>
	                            </tr>
	                        </tbody>
	                    </table>
	                </div>
	            </div>

            <!-- Cognito Auth Tab -->
            <div id="cognito-vars" class="tab-content">
                <h4 class="mb-md">Cognito Authentication (Optional)</h4>
                <div class="alert alert-info mb-md">
                    <strong>Note:</strong> Only required if authentication is enabled. Install <code>python-jose[cryptography]</code> for JWT validation.
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>COGNITO_USER_POOL_ID</code></td>
                                <td>{% if env_vars.COGNITO_USER_POOL_ID %}<span class="env-value set">{{ env_vars.COGNITO_USER_POOL_ID }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>AWS Cognito User Pool ID (format: region_randomstring)</td>
                            </tr>
                            <tr>
                                <td><code>COGNITO_APP_CLIENT_ID</code></td>
                                <td>{% if env_vars.COGNITO_APP_CLIENT_ID %}<span class="env-value set">{{ env_vars.COGNITO_APP_CLIENT_ID }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Cognito App Client ID for authentication</td>
                            </tr>
                            <tr>
                                <td><code>COGNITO_APP_CLIENT_SECRET</code></td>
                                <td>{% if env_vars.COGNITO_APP_CLIENT_SECRET %}<span class="env-value set">{{ env_vars.COGNITO_APP_CLIENT_SECRET }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Optional app client secret (required if client is configured with GenerateSecret=true)</td>
                            </tr>
                            <tr>
                                <td><code>COGNITO_DOMAIN</code></td>
                                <td>{% if env_vars.COGNITO_DOMAIN %}<span class="env-value set">{{ env_vars.COGNITO_DOMAIN }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Optional Cognito Hosted UI domain for SSO/OAuth flows</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- API Configuration Tab -->
            <div id="api-vars" class="tab-content">
                <h4 class="mb-md">API Server Configuration</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>API_HOST</code></td>
                                <td>{% if env_vars.API_HOST %}<span class="env-value set">{{ env_vars.API_HOST }}</span>{% else %}<span class="env-value not-set">0.0.0.0 (default)</span>{% endif %}</td>
                                <td>API server host address</td>
                            </tr>
                            <tr>
                                <td><code>API_PORT</code></td>
                                <td>{% if env_vars.API_PORT %}<span class="env-value set">{{ env_vars.API_PORT }}</span>{% else %}<span class="env-value not-set">8914 (default)</span>{% endif %}</td>
                                <td>API server port</td>
                            </tr>
                            <tr>
                                <td><code>ENABLE_AUTH</code></td>
                                <td>{% if env_vars.ENABLE_AUTH %}<span class="env-value set">{{ env_vars.ENABLE_AUTH }}</span>{% else %}<span class="env-value not-set">false (default)</span>{% endif %}</td>
                                <td>Enable Cognito authentication (true/false)</td>
                            </tr>
                            <tr>
                                <td><code>SESSION_SECRET_KEY</code></td>
                                <td>{% if env_vars.SESSION_SECRET_KEY %}<span class="env-value set">{{ env_vars.SESSION_SECRET_KEY }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Secret key for session middleware (change in production)</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- S3 & Storage Tab -->
            <div id="s3-vars" class="tab-content">
                <h4 class="mb-md">S3 & Storage Configuration</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>S3_BUCKET</code></td>
                                <td>{% if env_vars.S3_BUCKET %}<span class="env-value set">{{ env_vars.S3_BUCKET }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Default S3 bucket for worksets</td>
                            </tr>
                            <tr>
                                <td><code>S3_PREFIX</code></td>
                                <td>{% if env_vars.S3_PREFIX %}<span class="env-value set">{{ env_vars.S3_PREFIX }}</span>{% else %}<span class="env-value not-set">worksets/ (default)</span>{% endif %}</td>
                                <td>Default S3 prefix for workset files</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Notifications Tab -->
            <div id="notifications-vars" class="tab-content">
                <h4 class="mb-md">Notifications & Integrations</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>SNS_TOPIC_ARN</code></td>
                                <td>{% if env_vars.SNS_TOPIC_ARN %}<span class="env-value set">{{ env_vars.SNS_TOPIC_ARN }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>AWS SNS topic ARN for workset notifications</td>
                            </tr>
                            <tr>
                                <td><code>DAYLILY_SNS_TOPIC_ARN</code></td>
                                <td>{% if env_vars.DAYLILY_SNS_TOPIC_ARN %}<span class="env-value set">{{ env_vars.DAYLILY_SNS_TOPIC_ARN }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Alternative SNS topic ARN variable</td>
                            </tr>
                            <tr>
                                <td><code>LINEAR_API_KEY</code></td>
                                <td>{% if env_vars.LINEAR_API_KEY %}<span class="env-value set">{{ env_vars.LINEAR_API_KEY }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Linear API key for issue tracking integration</td>
                            </tr>
                            <tr>
                                <td><code>LINEAR_TEAM_ID</code></td>
                                <td>{% if env_vars.LINEAR_TEAM_ID %}<span class="env-value set">{{ env_vars.LINEAR_TEAM_ID }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Linear team ID for issue tracking</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Other Tab -->
            <div id="other-vars" class="tab-content">
                <h4 class="mb-md">Other Configuration Variables</h4>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Variable</th>
                                <th>Current Value</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>DAY_PROJECT</code></td>
                                <td>{% if env_vars.DAY_PROJECT %}<span class="env-value set">{{ env_vars.DAY_PROJECT }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Daylily project name</td>
                            </tr>
                            <tr>
                                <td><code>DAY_AWS_REGION</code></td>
                                <td>{% if env_vars.DAY_AWS_REGION %}<span class="env-value set">{{ env_vars.DAY_AWS_REGION }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Daylily AWS region</td>
                            </tr>
                            <tr>
                                <td><code>DAY_EX_CFG</code></td>
                                <td>{% if env_vars.DAY_EX_CFG %}<span class="env-value set">{{ env_vars.DAY_EX_CFG }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Path to Daylily ephemeral cluster configuration file</td>
                            </tr>
                            <tr>
                                <td><code>DAYLILY_PRIMARY_REGION</code></td>
                                <td>{% if env_vars.DAYLILY_PRIMARY_REGION %}<span class="env-value set">{{ env_vars.DAYLILY_PRIMARY_REGION }}</span>{% else %}<span class="env-value not-set">us-west-2 (default)</span>{% endif %}</td>
                                <td>Primary region for multi-region setup</td>
                            </tr>
                            <tr>
                                <td><code>DAYLILY_MULTI_REGION</code></td>
                                <td>{% if env_vars.DAYLILY_MULTI_REGION %}<span class="env-value set">{{ env_vars.DAYLILY_MULTI_REGION }}</span>{% else %}<span class="env-value not-set">false (default)</span>{% endif %}</td>
                                <td>Enable multi-region support (true/false)</td>
                            </tr>
                            <tr>
                                <td><code>APPTAINER_HOME</code></td>
                                <td>{% if env_vars.APPTAINER_HOME %}<span class="env-value set">{{ env_vars.APPTAINER_HOME }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Apptainer/Singularity container home directory</td>
                            </tr>
                            <tr>
                                <td><code>DAY_BIOME</code></td>
                                <td>{% if env_vars.DAY_BIOME %}<span class="env-value set">{{ env_vars.DAY_BIOME }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Daylily environment type (e.g., AWSPC)</td>
                            </tr>
                            <tr>
                                <td><code>DAY_ROOT</code></td>
                                <td>{% if env_vars.DAY_ROOT %}<span class="env-value set">{{ env_vars.DAY_ROOT }}</span>{% else %}<span class="env-value not-set">Not set</span>{% endif %}</td>
                                <td>Daylily root directory</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Danger Zone -->
    <div class="card mt-xl" style="border-color: var(--error);">
        <h3 class="card-title" style="color: var(--error);"><i class="fas fa-exclamation-triangle"></i> Danger Zone</h3>
        <p class="text-muted mb-md">Once you delete your account, there is no going back. Please be certain.</p>
        <button class="btn btn-danger" onclick="confirmDeleteAccount()">
            <i class="fas fa-trash"></i> Delete Account
        </button>
    </div>
</div>

<!-- Change Password Modal -->
<div class="modal" id="change-password-modal">
    <div class="modal-content" style="max-width: 450px;">
        <div class="modal-header">
            <h3><i class="fas fa-key"></i> Change Password</h3>
            <button class="modal-close" onclick="closeModal('change-password-modal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="change-password-form" onsubmit="submitPasswordChange(event)">
                <div class="form-group">
                    <label class="form-label required">Current Password</label>
                    <input type="password" id="current-password" class="form-control" required>
                </div>
                <div class="form-group">
                    <label class="form-label required">New Password</label>
                    <input type="password" id="new-password" class="form-control" required minlength="8">
                    <small class="form-help">Min 8 chars, include uppercase, lowercase, number, symbol</small>
                </div>
                <div class="form-group">
                    <label class="form-label required">Confirm New Password</label>
                    <input type="password" id="confirm-password" class="form-control" required minlength="8">
                </div>
                <button type="submit" class="btn btn-primary btn-block">
                    <i class="fas fa-check"></i> Update Password
                </button>
            </form>
        </div>
    </div>
</div>

<!-- API Tokens Modal -->
<div class="modal" id="api-tokens-modal">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header">
            <h3><i class="fas fa-code"></i> API Tokens</h3>
            <button class="modal-close" onclick="closeModal('api-tokens-modal')">&times;</button>
        </div>
        <div class="modal-body">
            <p class="text-muted mb-md">API tokens allow programmatic access to the Ursa API.</p>

            <div id="api-tokens-list" class="mb-lg">
                <div class="loading-spinner">Loading tokens...</div>
            </div>

            <div class="card" style="background: #1a2a33;">
                <h4 class="mb-sm">Generate New Token</h4>
                <div class="form-group">
                    <label class="form-label">Token Name</label>
                    <input type="text" id="new-token-name" class="form-control" placeholder="e.g., CI/CD Pipeline">
                </div>
                <div class="form-group">
                    <label class="form-label">Expiration</label>
                    <select id="new-token-expiry" class="form-control form-select">
                        <option value="30">30 days</option>
                        <option value="90">90 days</option>
                        <option value="365">1 year</option>
                        <option value="0">Never expires</option>
                    </select>
                </div>
                <button class="btn btn-primary" onclick="generateApiToken()">
                    <i class="fas fa-plus"></i> Generate Token
                </button>
            </div>

            <div id="new-token-display" class="alert alert-success mt-md" style="display: none;">
                <strong>New Token Generated!</strong>
                <p class="text-sm mb-sm">Copy this token now. You won't be able to see it again.</p>
                <div class="d-flex gap-sm">
                    <input type="text" id="new-token-value" class="form-control" readonly style="font-family: monospace;">
                    <button class="btn btn-outline" onclick="copyToken()">
                        <i class="fas fa-copy"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    /* Environment Variables Tabs */
    .tabs-header {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
        border-bottom: 2px solid var(--border);
        padding-bottom: 0.5rem;
    }

    .tab-button {
        padding: 0.5rem 1rem;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

    .tab-button:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .tab-button.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .tab-content {
        display: none;
        padding: 1rem 0;
    }

    .tab-content.active {
        display: block;
    }

    /* Table styles for environment variables */
    .table {
        width: 100%;
        border-collapse: collapse;
    }

    .table th,
    .table td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .table th {
        background: var(--bg-secondary);
        font-weight: 600;
        color: var(--text-primary);
    }

    .table tr:hover {
        background: var(--bg-secondary);
    }

    .table code {
        background: var(--bg-tertiary);
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-sm);
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        color: var(--primary);
    }

    .table-responsive {
        overflow-x: auto;
    }

    /* Alert styles */
    .alert {
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
    }

    .alert-info {
        background: rgba(0, 123, 255, 0.1);
        border: 1px solid rgba(0, 123, 255, 0.3);
        color: var(--text-primary);
    }

    .alert-warning {
        background: rgba(255, 193, 7, 0.1);
        border: 1px solid rgba(255, 193, 7, 0.3);
        color: var(--text-primary);
    }

    .alert ol {
        margin: 0.5rem 0 0 1.5rem;
        padding: 0;
    }

    .alert ol li {
        margin-bottom: 0.25rem;
    }

    /* Environment variable value styles */
    .env-value {
        font-family: 'Courier New', monospace;
        font-size: 0.875rem;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-sm);
    }

    .env-value.set {
        background: rgba(40, 167, 69, 0.15);
        color: #28a745;
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .env-value.not-set {
        background: rgba(108, 117, 125, 0.15);
        color: var(--text-muted);
        font-style: italic;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
// Tab switching function for environment variables
function switchTab(event, tabId) {
    // Remove active class from all buttons and content
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

    // Add active class to clicked button and corresponding content
    event.target.classList.add('active');
    document.getElementById(tabId).classList.add('active');
}

function showChangePassword() {
    showModal('change-password-modal');
    document.getElementById('current-password').focus();
}

async function submitPasswordChange(event) {
    event.preventDefault();

    const currentPassword = document.getElementById('current-password').value;
    const newPassword = document.getElementById('new-password').value;
    const confirmPassword = document.getElementById('confirm-password').value;

    if (newPassword.length < 8) {
        showToast('error', 'Error', 'Password must be at least 8 characters');
        return;
    }

    if (newPassword !== confirmPassword) {
        showToast('error', 'Error', 'Passwords do not match');
        return;
    }

    try {
        const response = await fetch('/api/v1/auth/change-password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                current_password: currentPassword,
                new_password: newPassword
            })
        });

        if (response.ok) {
            closeModal('change-password-modal');
            showToast('success', 'Success', 'Password updated successfully');
            document.getElementById('change-password-form').reset();
        } else {
            const error = await response.json();
            const detail = error.detail;
            const msg = Array.isArray(detail) ? detail.map(d => d.msg || String(d)).join('; ') : detail;
            showToast('error', 'Error', msg || 'Failed to change password');
        }
    } catch (error) {
        console.error('Password change error:', error);
        showToast('error', 'Error', 'Failed to change password');
    }
}

function showApiTokens() {
    showModal('api-tokens-modal');
    loadApiTokens();
}

async function loadApiTokens() {
    const container = document.getElementById('api-tokens-list');

    try {
        const response = await fetch('/api/v1/auth/tokens');
        if (response.ok) {
            const tokens = await response.json();
            if (tokens.length === 0) {
                container.innerHTML = '<p class="text-muted">No API tokens yet.</p>';
            } else {
                container.innerHTML = tokens.map(token => `
                    <div class="d-flex justify-between align-center p-md mb-sm" style="background: #0d1a22; border-radius: var(--radius-md);">
                        <div>
                            <strong>${token.name}</strong>
                            <span class="text-muted text-sm ml-sm">Created: ${new Date(token.created_at).toLocaleDateString()}</span>
                            ${token.expires_at ? `<span class="text-muted text-sm ml-sm">Expires: ${new Date(token.expires_at).toLocaleDateString()}</span>` : ''}
                        </div>
                        <button class="btn btn-sm btn-danger" onclick="revokeToken('${token.id}')">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `).join('');
            }
        } else {
            container.innerHTML = '<p class="text-muted">Unable to load tokens.</p>';
        }
    } catch (error) {
        container.innerHTML = '<p class="text-muted">Unable to load tokens.</p>';
    }
}

async function generateApiToken() {
    const name = document.getElementById('new-token-name').value || 'API Token';
    const expiryDays = parseInt(document.getElementById('new-token-expiry').value);

    try {
        const response = await fetch('/api/v1/auth/tokens', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, expiry_days: expiryDays })
        });

        if (response.ok) {
            const data = await response.json();
            document.getElementById('new-token-value').value = data.token;
            document.getElementById('new-token-display').style.display = 'block';
            document.getElementById('new-token-name').value = '';
            loadApiTokens();
            showToast('success', 'Created', 'API token generated (copy it now; it will not be shown again)');
        } else {
            const error = await response.json();
            const detail = error.detail;
            const msg = Array.isArray(detail) ? detail.map(d => d.msg || String(d)).join('; ') : detail;
            showToast('error', 'Error', msg || 'Failed to generate token');
        }
    } catch (error) {
        console.error('Token generation error:', error);
        showToast('error', 'Error', 'Failed to generate token');
    }
}

function copyToken() {
    const tokenInput = document.getElementById('new-token-value');
    tokenInput.select();
    document.execCommand('copy');
    showToast('success', 'Copied', 'Token copied to clipboard');
}

async function revokeToken(tokenId) {
    if (!confirm('Are you sure you want to revoke this token?')) return;

    try {
        const response = await fetch(`/api/v1/auth/tokens/${tokenId}`, {
            method: 'DELETE'
        });

        if (response.ok) {
            showToast('success', 'Revoked', 'Token has been revoked');
            loadApiTokens();
        } else {
            showToast('error', 'Error', 'Failed to revoke token');
        }
    } catch (error) {
        showToast('error', 'Error', 'Failed to revoke token');
    }
}

function confirmDeleteAccount() {
    if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
        alert('Account deletion requires contacting support. Please email admin@lsmc.com');
    }
}
</script>
{% endblock %}