{% extends "base.html" %}

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

{% block content %}
<h1>Career</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.
  For raw JSON or photo upload, see <a href="/cv">CV</a>.
</p>

<form method="post" action="/career/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 Career</button>

</form>

<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 %}