{% extends "index.html" %}

{% block topbar_left_extra %}
<span class="app-name-text">ThirtyTutors</span>
{% endblock %}

{% block title %}Get started - ThirtyTutors AI{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/UI/styles/sidebar.css?v=1" />
<link rel="stylesheet" href="/UI/styles/modals.css?v=1" />
<link rel="stylesheet" href="/UI/styles/get_started.css?v=1" />
{% endblock %}

{% block content %}
<div id="landingWrap">
  <div id="landingCard">
    <h1 id="landingTitle">ThirtyTutors AI</h1>
    <p id="landingSubtitle">A few things about you and your tutor, then we'll pick your avatar.</p>

    <div id="landingForm">
      <label class="field-label" for="firstNameInput">First name</label>
      <input id="firstNameInput" type="text" class="text-input" placeholder="Your name" maxlength="40" autocomplete="off" />

      <label class="field-label" for="nativeLanguageInput">You speak</label>
      <input id="nativeLanguageInput" type="text" class="text-input" placeholder="English" autocomplete="off" />

      <label class="field-label" for="apiKeyInput">Gemini API key</label>
      <div class="field-row">
        <input id="apiKeyInput" type="password" class="text-input" placeholder="Paste your Gemini API key" autocomplete="off" />
        <button id="toggleApiKeyBtn" class="icon-btn" type="button" title="Show/hide API key">👁️</button>
      </div>
      <p class="field-hint">Free from <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener">Google AI Studio</a>. Stored on your profile - required to connect.</p>

      <label class="field-label" for="modelSelect">Model</label>
      <select id="modelSelect"></select>
      <p class="field-hint" id="modelHint"></p>

      <button id="nextBtn" class="primary-btn" type="button" disabled style="width:100%; margin-top: 24px;">Next</button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/UI/scripts/get_started.js?v=1"></script>
{% endblock %}