src/templates/dashboard/settings.html

{% extends "base.html" %}
{% block title %}Settings - QuantVAT{% endblock %} 
{% block description %}Hey fellow trader / analyst, welcome to settings page. Update your account or factory reset it.
{% endblock %} 
{% block og_title %}Settings - QuantVAT{% endblock %} 
{% block og_description %}Hey fellow trader / analyst, welcome to settings page. Update your account or factory reset it.{% endblock %} 
{% block keywords %}register, secure access, crypto dashboard, cryptovat, trading tools{% endblock %} 
{% block extra_css %}
<style>
/* --- MODAL OVERLAY --- */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* --- MODAL CONTAINER --- */

.modal-box {
    background: #151a1e;
    border: 1px solid #f6465d;
    border-radius: 16px;
    padding: 25px 20px;
    max-width: 300px;
    width: 85%;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Modal Entrance Animation */
@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- MODAL CONTENT --- */

.modal-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    display: block;
    /* Glow effect for the icon */
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.3));
}

.modal-title {
    color: #f6465d;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-text {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* --- MODAL ACTION BUTTONS --- */

.modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.btn-cancel {
    background: transparent;
    border: 1px solid #2b3139;
    color: #6b7280;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: #2b3139;
    color: #fff;
}

.btn-delete {
    background: rgba(246, 70, 93, 0.1);
    border: 1px solid #f6465d;
    color: #f6465d;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-delete:hover {
    background: #f6465d;
    color: #fff;
    box-shadow: 0 4px 15px rgba(246, 70, 93, 0.4);
}
    </style>
{% endblock %}

{% block content %}
<div class="container">
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="{{ category }}-message">{{ '✅' if category == 'success' else '⚠️' }} {{ message }}</div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {% if success %}
      <div class="success-message">✅ {{ success }}</div>
    {% endif %}
    <h1>🛠️ Settings</h1>
    
    <div class="card">
        <p style="text-align:center; color:#848e9c; font-size:0.9rem;">
            Manage your API configuration and account settings
        </p>
    </div>

    <form action="{{ url_for('main.save_config') }}" method="POST">
        <input type="hidden" name="source" value="settings">
        <div class="card">
            <h2 style="color: var(--accent-green);">API Configuration</h2>
            <p style="color:#848e9c; font-size:0.9rem; margin-bottom:15px;">Update your API keys anytime</p>
            
            <label>CoinMarketCap Key</label>
            <input type="text" name="cmc_key" value="{{ cmc }}" required>
          
            <label style="margin-top:10px; display:block;">CoinGecko Key</label>
            <input type="text" name="cg_key" value="{{ cg }}" required>
            
            <label style="margin-top:10px; display:block;">LiveCoinWatch Key</label>
            <input type="text" name="lcw_key" value="{{ lcw }}" required>
            
            <label style="margin-top:10px; display:block;">VTMR URL</label>
            <input type="text" name="vtmr_url" value="{{ vtmr }}" required>
            
            <button type="submit" class="btn btn-green">UPDATE SETTINGS</button>
        </div>
    </form>

  <form action="{{ url_for('main.save_ai_key') }}" method="POST">
    <input type="hidden" name="source" value="settings">
    <div class="card">
        <h2 style="color: var(--accent-green);">AI Auditor Config</h2>
        <p style="color:#848e9c; font-size:0.9rem; margin-bottom:15px;">
            Provide your <strong>Google Gemini Flash API key</strong> to enable deep, blunt and honest analysis of your selected trading journal.
        </p>
        
        <label>Gemini Api Key</label> <a href="https://aistudio.google.com/" target="_blank" class="get-key-link">Get Key ↗</a>
        <input type="text" name="api_key" 
               value="{{ user_settings.gemini_key if user_settings and user_settings.gemini_key else '' }}" 
               placeholder="Optional: Paste key here..." required>
      
        <button type="submit" class="btn btn-green">UPDATE SETTING</button>
        
    </div>
</form>
  
    <div class="card">
    <h2 style="color: var(--accent-green);">Cloud Storage</h2>
    <p style="color:#848e9c; font-size:0.9rem; margin-bottom:15px;">
        Manage your Google Drive connection for automated Trading Journal syncing.
    </p>

    {% if drive_linked %}
        <form action="{{ url_for('tasks.google_disconnect') }}" method="POST">
            <button type="submit" class="btn btn-red">
                DISCONNECT G-DRIVE AUTH
            </button>
        </form>
    {% else %}
        <a href="{{ url_for('tasks.google_login') }}" class="btn btn-green" style="text-decoration: none; display: block; text-align: center;">
            CONNECT GOOGLE DRIVE
        </a>
    {% endif %}
</div>

  
    <div class="card" style="border-color: var(--accent-red); background: rgba(246,70,93,0.05);">
        <h2 style="color:var(--accent-red); margin-top:0;">⚠️ Danger Zone</h2>
        <p style="font-size:0.85rem; color:#848e9c;">This will delete all your saved API keys and VTMR URL, returning you to the Setup Wizard.</p>
        <button type="button" class="btn btn-red" onclick="openModal()">FACTORY RESET</button>
    </div>

</div>

<div id="resetModal" class="modal-overlay">
    <div class="modal-box">
        <span class="modal-icon">⚠️</span>
        <div class="modal-title">Are you absolutely sure?</div>
        <div class="modal-text">
            This action cannot be undone. All your saved API keys configuration and AI Auditor memory will be permanently deleted.
        </div>
        <div class="modal-actions">
            <button class="btn-cancel" onclick="closeModal()">CANCEL</button>
            <a href="{{ url_for('main.factory_reset') }}" class="btn-delete" style="margin-top:0; display:flex; align-items:center; justify-content:center; text-decoration:none;">YES, DELETE IT</a>
        </div>
    </div>
</div>

<script>
    // Modal helper
    function openModal() {
        document.getElementById('resetModal').style.display = 'flex';   
    }
    
    function closeModal() {
        document.getElementById('resetModal').style.display = 'none';
    }  
    
    // Close if clicked outside the box
    document.getElementById('resetModal').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });
</script>
{% endblock %}