{% extends "base.html" %}
{% block title %}Setup Wizard - QuantVAT{% endblock %} 
{% block description %}Welcome to QuantVAT one-time setup wizard. Configure your API keys and VTMR URL to unlock the full potential of the latest version of this toolkit.{% endblock %} 
{% block og_title %}Setup Wizard - QuantVAT{% endblock %} 
{% block og_description %}Welcome to QuantVAT one-time setup wizard. Configure your API keys and VTMR URL to unlock the full potential of the latest version of this toolkit.{% endblock %} 
{% block keywords %}register, secure access, crypto dashboard, cryptovat, trading tools{% endblock %} 
{% block extra_css %}
<style>
  /* --- SETUP GUIDE BOX --- */
.setup-guide-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    font-size: 0.95rem;
}
  /* Placeholder */
 input::placeholder { 
   color: #64748b; 
   opacity: 1; 
   font-style: italic; 
 }
</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>⚙️ Setup Wizard</h1>
    
    <div class="card">
        <p>Welcome to <b>QuantVAT</b> one-time setup wizard. Configure your API keys and VTMR URL to unlock the full potential of the latest version of this kit.</p>
        <p><small>Note: All values are encrypted and stored securely in your cloud account. You can access, delete, or update them anytime.</small></p>
    </div>

    <form action="{{ url_for('main.save_config') }}" method="POST">
        <div class="card">
            <h2 style="color: var(--accent-green);">API Keys Setup</h2>
            
            <label>CoinMarketCap Key <a href="https://pro.coinmarketcap.com/signup/" target="_blank" class="get-key-link">Get Key ↗</a></label>
            <input type="text" name="cmc_key" value="{{ cmc }}" placeholder="Paste CMC Key here...">

           <label style="margin-top:15px; display:block;">CoinGecko Key <a href="https://www.coingecko.com/en/developers/dashboard" target="_blank" class="get-key-link">Get Demo Key ↗</a></label>
            <input type="text" name="cg_key" value="{{ cg }}" placeholder="Paste CG Key here...">

            <label style="margin-top:15px; display:block;">LiveCoinWatch Key <a href="https://www.livecoinwatch.com/tools/api" target="_blank" class="get-key-link">Get Key ↗</a></label>
            <input type="text" name="lcw_key" value="{{ lcw }}" placeholder="Paste LCW Key here...">

        </div>

        <div class="card">
            <h2 style="color: var(--accent-green);">CoinAlyze Setup</h2>
            
            <label>VTMR URL  </label>
            
            <input type="text" name="vtmr_url" value="{{ vtmr }}" placeholder="https://coinalyze.net/?columns=...">
            
            <div class="setup-guide-box">
                <strong style="color:var(--text-white); display:block; margin-bottom:10px;">📋 Instructions:</strong>
                <ol style="margin:0; padding-left:20px; color:var(--text-dim); line-height: 1.6;">
                    <li>Visit <a href="https://github.com/heisbuba/quantvat" target="_blank" style="color: var(--accent-green);text-decoration:underline;">GitHub</a> and copy the VTMR code.
                    </li>
                    <li>Log in to <a href="https://coinalyze.net" target="_blank" style="color: var(--accent-green);text-decoration:underline;">CoinAlyze.net</a>.
                    </li>
                    <li>Create <strong>Custom Metrics</strong> → Name: <strong>VTMR</strong>.</li>
                    <li>Select Columns: Market Cap, Vol 24H, OI Change % 24H, Predicted Funding Rate (OI Weighted), VTMR.</li>
                    <li>Sort the table by <strong>VTMR</strong> (highest first).</li>
                    <li>Copy the <strong>entire browser URL</strong> and paste above.</li>
                </ol>
            </div>
        </div>

        <div class="grid-buttons" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px;">
            <button type="submit" class="btn btn-green" style="margin: 0; width: 100%; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center; font-weight: 800;">
                SAVE & LAUNCH
            </button>

            <a href="{{ url_for('auth.logout') }}" class="btn btn-red" style="margin: 0; width: 100%; height: 50px; padding: 0; box-sizing: border-box; text-decoration: none; display: flex; align-items: center; justify-content: center; font-weight: 800;">
                QUIT
            </a>
        </div>
    </form>
</div>
{% endblock %}