{% extends "base.html" %}

{% block title %}Profile — karyab{% endblock %}

{% block content %}
<h1>Profile</h1>

{% if flash %}
<div class="flash-banner" style="background:var(--muted);padding:.6rem 1rem;margin-bottom:1rem;border-radius:4px;">
  {{ flash }}
</div>
{% endif %}

<p style="margin-bottom:1.5rem;">
  Structured editor for your master CV.
</p>

<form method="post" action="/profile/save">

  <!-- ── Basics ── -->
  <section style="margin-bottom:2rem;">
    <h2>Basics</h2>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;max-width:700px;">
      <label>
        Name <span style="color:var(--danger,red)">*</span><br>
        <input type="text" name="name" value="{{ name }}" required
               style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
      </label>
      <label>
        Title / Label<br>
        <input type="text" name="label" value="{{ label }}"
               style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
      </label>
      <label>
        Email<br>
        <input type="email" name="email" value="{{ email }}"
               style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
      </label>
      <label>
        Phone<br>
        <input type="tel" name="phone" value="{{ phone }}"
               style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
      </label>
      <label>
        City<br>
        <input type="text" name="city" value="{{ city }}"
               style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
      </label>
      <label>
        Region<br>
        <input type="text" name="region" value="{{ region }}"
               style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
      </label>
      <label style="grid-column:1/-1;">
        LinkedIn URL<br>
        <input type="url" name="linkedin" value="{{ linkedin }}"
               style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
      </label>
      <label style="grid-column:1/-1;">
        Summary<br>
        <textarea name="summary" rows="3"
                  style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;resize:vertical;">{{ summary }}</textarea>
      </label>
    </div>
  </section>

  <!-- ── Experience ── -->
  <section style="margin-bottom:2rem;">
    <h2>Experience</h2>
    <div id="exp-cards">
      {% for row in work_rows %}
      <div class="exp-card" style="border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:.75rem;max-width:700px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;">
          <label>Position<br>
            <input type="text" name="exp_position" value="{{ row.position }}"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Company<br>
            <input type="text" name="exp_company" value="{{ row.company }}"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Start<br>
            <input type="text" name="exp_start" value="{{ row.startDate }}" placeholder="2020-01"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>End<br>
            <input type="text" name="exp_end" value="{{ row.endDate }}" placeholder="2024-06 or blank"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label style="grid-column:1/-1;">Highlights (one per line)<br>
            <textarea name="exp_highlights" rows="3"
                      style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;resize:vertical;">{{ row.highlights }}</textarea>
          </label>
        </div>
        <button type="button" class="btn" onclick="removeCard(this)"
                style="margin-top:.5rem;font-size:.8rem;">Remove</button>
      </div>
      {% endfor %}

      <!-- blank card always shown so user can add first entry -->
      <div class="exp-card" style="border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:.75rem;max-width:700px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem;">
          <label>Position<br>
            <input type="text" name="exp_position" value=""
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Company<br>
            <input type="text" name="exp_company" value=""
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Start<br>
            <input type="text" name="exp_start" value="" placeholder="2020-01"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>End<br>
            <input type="text" name="exp_end" value="" placeholder="2024-06 or blank"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label style="grid-column:1/-1;">Highlights (one per line)<br>
            <textarea name="exp_highlights" rows="3"
                      style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;resize:vertical;"></textarea>
          </label>
        </div>
        <button type="button" class="btn" onclick="removeCard(this)"
                style="margin-top:.5rem;font-size:.8rem;">Remove</button>
      </div>
    </div>
    <button type="button" class="btn" onclick="addExpCard()" style="margin-top:.25rem;">+ Add position</button>
  </section>

  <!-- ── Skills ── -->
  <section style="margin-bottom:2rem;">
    <h2>Skills</h2>
    <div id="skill-cards">
      {% for row in skill_rows %}
      <div class="skill-card" style="border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:.75rem;max-width:700px;">
        <div style="display:grid;grid-template-columns:1fr 2fr;gap:.5rem;">
          <label>Category<br>
            <input type="text" name="skill_category" value="{{ row.name }}"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Keywords (one per line)<br>
            <textarea name="skill_items" rows="3"
                      style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;resize:vertical;">{{ row["items"] }}</textarea>
          </label>
        </div>
        <button type="button" class="btn" onclick="removeCard(this)"
                style="margin-top:.5rem;font-size:.8rem;">Remove</button>
      </div>
      {% endfor %}
      <div class="skill-card" style="border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:.75rem;max-width:700px;">
        <div style="display:grid;grid-template-columns:1fr 2fr;gap:.5rem;">
          <label>Category<br>
            <input type="text" name="skill_category" value=""
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Keywords (one per line)<br>
            <textarea name="skill_items" rows="3"
                      style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;resize:vertical;"></textarea>
          </label>
        </div>
        <button type="button" class="btn" onclick="removeCard(this)"
                style="margin-top:.5rem;font-size:.8rem;">Remove</button>
      </div>
    </div>
    <button type="button" class="btn" onclick="addSkillCard()" style="margin-top:.25rem;">+ Add skill category</button>
  </section>

  <!-- ── Education ── -->
  <section style="margin-bottom:2rem;">
    <h2>Education</h2>
    <div id="edu-cards">
      {% for row in edu_rows %}
      <div class="edu-card" style="border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:.75rem;max-width:700px;">
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;">
          <label>Degree type<br>
            <input type="text" name="edu_studytype" value="{{ row.studyType }}"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Institution<br>
            <input type="text" name="edu_institution" value="{{ row.institution }}"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Field of study<br>
            <input type="text" name="edu_area" value="{{ row.area }}"
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
        </div>
        <button type="button" class="btn" onclick="removeCard(this)"
                style="margin-top:.5rem;font-size:.8rem;">Remove</button>
      </div>
      {% endfor %}
      <div class="edu-card" style="border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:.75rem;max-width:700px;">
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;">
          <label>Degree type<br>
            <input type="text" name="edu_studytype" value=""
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Institution<br>
            <input type="text" name="edu_institution" value=""
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
          <label>Field of study<br>
            <input type="text" name="edu_area" value=""
                   style="width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:4px;">
          </label>
        </div>
        <button type="button" class="btn" onclick="removeCard(this)"
                style="margin-top:.5rem;font-size:.8rem;">Remove</button>
      </div>
    </div>
    <button type="button" class="btn" onclick="addEduCard()" style="margin-top:.25rem;">+ Add education</button>
  </section>

  <!-- ── Personal Skills ── -->
  <section style="margin-bottom:2rem;">
    <h2>Personal Skills</h2>
    <label style="max-width:700px;display:block;">
      One skill per line<br>
      <textarea name="personal_skills" rows="4"
                style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;resize:vertical;">{{ personal_skills }}</textarea>
    </label>
  </section>

  <!-- ── Languages ── -->
  <section style="margin-bottom:2rem;">
    <h2>Languages</h2>
    <label style="max-width:700px;display:block;">
      One per line, format: Language — Fluency (e.g. English — Native)<br>
      <textarea name="languages" rows="4"
                style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;resize:vertical;">{{ languages }}</textarea>
    </label>
  </section>

  <!-- ── References ── -->
  <section style="margin-bottom:2rem;">
    <h2>References</h2>
    <label style="max-width:700px;display:block;">
      <input type="text" name="references" value="{{ references }}"
             style="width:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:4px;">
    </label>
  </section>

  <button type="submit" class="btn btn-primary" style="padding:.6rem 1.5rem;">Save Profile</button>

</form>

<!-- ── Photo upload ── -->
<section style="margin-top:2.5rem;margin-bottom:2rem;">
  <h2>Profile photo</h2>
  <form method="post" action="/cv/photo" enctype="multipart/form-data">
    <input type="file" name="photo" accept="image/*" style="margin-bottom:0.5rem">
    <button type="submit" class="btn">Upload photo</button>
  </form>
  {% if master and master.basics and master.basics.image %}
  <p style="color:var(--muted);font-size:0.85rem">Current photo: <code>{{ master.basics.image }}</code></p>
  {% endif %}
  <p style="color:var(--muted);font-size:0.85rem">Accepted: jpg, jpeg, png, webp — max 5 MB. Stored as <code>cv-photo.&lt;ext&gt;</code> in the config dir.</p>
</section>

<!-- ── Import ── -->
<section style="margin-bottom:2rem;">
  <h2>Import CV</h2>
  <form method="post" action="/cv/import" enctype="multipart/form-data">
    <input type="file" name="file" accept=".pdf,.docx" style="margin-bottom:0.5rem">
    <button type="submit" class="btn">Import CV</button>
  </form>
  <p style="color:var(--muted);font-size:0.85rem">Upload a PDF or DOCX to extract and (with an autonomous backend) auto-convert to JSON Resume.</p>

  {% if imported %}
  <h3 style="margin-top:1rem">Imported text</h3>
  <p style="color:var(--muted);font-size:0.9rem">Manual backend active — copy the text below and paste into the advanced editor.</p>
  <textarea readonly rows="10"
    style="width:100%;padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);resize:vertical;font-size:0.85rem;font-family:monospace">{{ imported }}</textarea>
  {% endif %}
</section>

<!-- ── Advanced: raw JSON ── -->
<section style="margin-bottom:2rem;">
  <details>
    <summary style="cursor:pointer;font-weight:600;font-size:1rem;">Advanced: raw JSON editor</summary>
    <div style="margin-top:1rem;">
      <p style="color:var(--muted);font-size:0.85rem;margin-bottom:0.5rem;">
        Direct edit of the master <code>cv.json</code>. Use with care — the structured editor above is the preferred path.
      </p>
      <form method="post" action="/cv/save">
        <textarea name="cv_json" rows="20"
          style="width:100%;padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);resize:vertical;font-size:0.85rem;font-family:monospace"
          placeholder='{"basics": {"name": "Your Name", ...}}'>{{ cv_json_str }}</textarea>
        <button type="submit" class="btn btn-primary" style="margin-top:0.5rem">Save JSON</button>
      </form>
    </div>
  </details>
</section>

<script>
function removeCard(btn) {
  btn.closest('[class$="-card"]') && btn.closest('[class$="-card"]').remove();
  // fallback: remove parent div
  var card = btn.parentElement;
  while (card && !card.className.match(/card/)) { card = card.parentElement; }
  if (card) card.remove();
}

function cloneBlankCard(containerId) {
  var container = document.getElementById(containerId);
  var cards = container.querySelectorAll('[class$="-card"]');
  var last = cards[cards.length - 1];
  var clone = last.cloneNode(true);
  clone.querySelectorAll('input,textarea').forEach(function(el) { el.value = ''; });
  container.appendChild(clone);
}

function addExpCard() { cloneBlankCard('exp-cards'); }
function addSkillCard() { cloneBlankCard('skill-cards'); }
function addEduCard() { cloneBlankCard('edu-cards'); }
</script>

{% endblock %}