{% extends "base.html" %}
{% block title %}Додај хемиски елемент{% endblock %}

{% block content %}
<style>
  .hero{background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;border-radius:18px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pill{width:54px;height:54px;border-radius:14px;background:#ffffff22;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px}
  .type-badge{background:#ffffff22;color:#fff;border-radius:999px;padding:6px 12px;font-weight:600;letter-spacing:.2px}
  .wrap{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;margin-top:16px}
  @media (max-width: 992px){.wrap{grid-template-columns:1fr}}
  .card.block{border:0;border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.08)}
  .section-title{font-weight:800;margin-bottom:.35rem}
  .muted{color:#6c757d}
  .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;margin:4px;border-radius:999px;background:#eef2ff;color:#3f51b5;font-weight:600;cursor:pointer;border:1px solid rgba(63,81,181,.25);user-select:none;font-size:.9rem}
  .sticky-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid #eef1f4;padding:12px 0;margin-top:8px}
</style>

<div class="hero">
  <div class="d-flex align-items-center gap-3">
    <div class="pill" id="sym-pill">—</div>
    <div>
      <h2 class="mb-0 text-truncate">Додај нов хемиски елемент</h2>
      <div class="small opacity-75">Внеси основни податоци и безбедност</div>
    </div>
  </div>
  <div class="d-flex align-items-center gap-2 flex-wrap">
    <span class="type-badge">Полиња со <b>*</b> се задолжителни</span>
    <a href="/elements" class="btn btn-light btn-sm fw-semibold"><i class="bi bi-list"></i> Листа</a>
  </div>
</div>

<div class="wrap">
  <!-- Лево: форма -->
  <div class="card block">
    <div class="card-body">
      <h5 class="section-title"><i class="bi bi-plus-circle"></i> Податоци за елемент</h5>
      {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}

      <form method="POST" id="element-form" novalidate>
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label">Симбол *</label>
            <input type="text" class="form-control" name="symbol" id="symbol"
                   maxlength="3" required pattern="^[A-Za-z]{1,3}$" placeholder="Na, Cl, Al...">
            <div class="form-text">1–3 букви, ќе се запише како големи.</div>
          </div>
          <div class="col-md-8">
            <label class="form-label">Име на елемент *</label>
            <input type="text" class="form-control" name="name" id="el-name" required placeholder="Натриум">
          </div>

          <div class="col-md-4">
            <label class="form-label">Атомски број *</label>
            <input type="number" class="form-control" name="atomic_number" id="el-num" min="1" max="118" required>
          </div>
          <div class="col-md-4">
            <label class="form-label">Атомска маса *</label>
            <div class="input-group">
              <input type="number" step="0.0001" class="form-control" name="atomic_weight" id="el-weight" required>
              <span class="input-group-text">u</span>
            </div>
          </div>
          <div class="col-md-4"></div>

          <div class="col-md-6">
            <label class="form-label">Точка на топење (°C)</label>
            <input type="number" step="0.1" class="form-control" name="melting_point" placeholder="опц.">
          </div>
          <div class="col-md-6">
            <label class="form-label">Точка на вриење (°C)</label>
            <input type="number" step="0.1" class="form-control" name="boiling_point" placeholder="опц.">
          </div>

          <div class="col-12">
            <label class="form-label">Тип на опасност</label>
            <input type="text" class="form-control" name="hazard_type" id="hazard" maxlength="50" placeholder="Нема опасност / Корозивно / Токсично ...">
            <div class="form-text">Брз избор:</div>
            <div>
              <span class="chip" onclick="pickHazard('Нема опасност')">✔ Нема опасност</span>
              <span class="chip" onclick="pickHazard('Корозивно')">⚠ Корозивно</span>
              <span class="chip" onclick="pickHazard('Токсично')">☠ Токсично</span>
              <span class="chip" onclick="pickHazard('Запалливо')">🔥 Запалливо</span>
              <span class="chip" onclick="pickHazard('Иритант')">❗ Иритант</span>
            </div>
          </div>

          <div class="col-12">
            <label class="form-label">Опис</label>
            <textarea class="form-control" name="description" rows="4" placeholder="Краток опис, својства, забелешки..."></textarea>
          </div>
        </div>

        <div class="sticky-actions d-flex justify-content-between align-items-center">
          <a href="/elements" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> Откажи</a>
          <button type="submit" class="btn btn-success"><i class="bi bi-check2-circle"></i> Додај елемент</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Десно: жив преглед -->
  <div class="card block">
    <div class="card-body">
      <h6 class="section-title"><i class="bi bi-magic"></i> Жив преглед</h6>
      <div class="d-flex align-items-center gap-3 mb-3">
        <div class="pill" id="preview-pill">—</div>
        <div>
          <div class="fw-bold" id="preview-name">Име на елемент</div>
          <div class="small muted">№ <span id="preview-atomic">—</span> • <span id="preview-weight">—</span> u</div>
        </div>
      </div>
      <hr class="my-3"/>
      <h6 class="section-title"><i class="bi bi-lightbulb"></i> Совети</h6>
      <ul class="small mb-0">
        <li>Провери уникатност на симболот (Na ≠ N).</li>
        <li>Атомската маса запиши со децимали (на пр. 22.9898).</li>
      </ul>
    </div>
  </div>
</div>

<script>
  const sym = document.getElementById('symbol');
  const nameEl = document.getElementById('el-name');
  const numEl = document.getElementById('el-num');
  const wEl   = document.getElementById('el-weight');

  function updatePreview(){
    const s = sym.value || '—';
    document.getElementById('sym-pill').textContent = s;
    document.getElementById('preview-pill').textContent = s;
    document.getElementById('preview-name').textContent = nameEl.value || 'Име на елемент';
    document.getElementById('preview-atomic').textContent = numEl.value || '—';
    document.getElementById('preview-weight').textContent = wEl.value || '—';
  }
  function pickHazard(txt){ const hz=document.getElementById('hazard'); hz.value=txt; hz.focus(); }
  sym.addEventListener('input', ()=>{ sym.value = sym.value.toUpperCase(); updatePreview(); });
  nameEl.addEventListener('input', updatePreview);
  numEl.addEventListener('input', updatePreview);
  wEl.addEventListener('input', updatePreview);
  updatePreview();
</script>
{% endblock %}