{% comment %}
  Satu kartu pengalaman.

  Kalau grup hanya berisi satu posisi, tampilannya sama seperti kartu biasa.
  Kalau berisi beberapa posisi di perusahaan yang sama, nama dan logo
  perusahaan tampil sekali di header, lalu posisi-posisinya jadi sub-item
  dengan garis waktu kecil di dalamnya.

  Daftar posisi sengaja diletakkan sebagai saudara dari baris logo (bukan di
  dalamnya) supaya garis waktunya bisa digeser: di layar kecil garis itu jatuh
  tepat di tengah logo — lebih rapi dan teksnya dapat ruang lebih lebar —
  sedangkan di layar besar tetap sejajar dengan kolom teks header.

  Variabel: group (ExperienceGroup), compact (bool — versi ringkas untuk beranda)
{% endcomment %}

<article class="reveal card card-glow spotlight p-6">
  <span class="timeline-dot {% if group.is_current %}timeline-dot-live{% endif %}"></span>

  {# ------------------------------------------------ baris logo + judul ------ #}
  <div class="flex flex-wrap items-start gap-4">
    {% if group.logo %}
      <img src="{{ group.logo.url }}" alt="{{ group.company }}"
           class="{% if compact %}h-12 w-12{% else %}h-14 w-14{% endif %} shrink-0 rounded-xl border border-white/10 object-cover">
    {% else %}
      <span class="{% if compact %}h-12 w-12 text-lg{% else %}h-14 w-14 text-xl{% endif %} grid shrink-0 place-items-center rounded-xl border border-white/10 bg-white/5 font-display font-bold text-brand-400">
        {{ group.company|slice:":1"|upper }}
      </span>
    {% endif %}

    <div class="min-w-0 flex-1">
      {% if group.is_multi %}
        {# ---------------- Beberapa posisi: perusahaan jadi judul ---------------- #}
        <div class="flex flex-wrap items-center gap-2">
          <h3 class="font-display text-lg font-bold text-neutral-50">
            {% if group.company_url %}
              <a href="{{ group.company_url }}" target="_blank" rel="noopener" class="hover:text-gold-400">{{ group.company }}</a>
            {% else %}{{ group.company }}{% endif %}
          </h3>
          {% if group.is_current %}
            <span class="rounded-full bg-emerald-500/12 px-2.5 py-0.5 text-[0.65rem] font-bold uppercase tracking-wide text-emerald-400">Aktif</span>
          {% endif %}
        </div>

        <p class="mt-1 text-xs text-neutral-500">
          {{ group.period }} <span class="text-neutral-700">·</span>
          <span class="text-neutral-400">{{ group.duration }}</span>
          {% if group.employment_type_display %}
            <span class="text-neutral-700">·</span> {{ group.employment_type_display }}
          {% endif %}
          {% if group.location %}
            <span class="text-neutral-700">·</span> {{ group.location }}
          {% endif %}
        </p>

      {% else %}
        {# ---------------- Satu posisi: tampilan seperti semula ---------------- #}
        {% with role=group.roles.0 %}
          <div class="flex flex-wrap items-center gap-2">
            <h3 class="font-display text-lg font-bold text-neutral-50">{{ role.position }}</h3>
            {% if role.is_current %}
              <span class="rounded-full bg-emerald-500/12 px-2.5 py-0.5 text-[0.65rem] font-bold uppercase tracking-wide text-emerald-400">Aktif</span>
            {% endif %}
          </div>

          <p class="mt-0.5 text-sm font-medium text-brand-400">
            {% if role.company_url %}
              <a href="{{ role.company_url }}" target="_blank" rel="noopener" class="hover:underline">{{ role.company }}</a>
            {% else %}{{ role.company }}{% endif %}
            <span class="text-neutral-600">·</span>
            <span class="text-neutral-500">{{ role.get_employment_type_display }}</span>
          </p>

          <p class="mt-1.5 text-xs text-neutral-500">
            {{ role.period }} <span class="text-neutral-700">·</span>
            <span class="text-neutral-400">{{ role.duration }}</span>
            {% if role.location %}
              <span class="text-neutral-700">·</span> {{ role.location }}
              <span class="text-neutral-700">·</span> {{ role.get_location_type_display }}
            {% endif %}
          </p>

          {% if role.bullets %}
            <ul class="mt-4 space-y-2">
              {% if compact %}
                {% for b in role.bullets|slice:":3" %}
                  <li class="flex gap-2.5 text-sm leading-relaxed text-neutral-400">
                    <span class="mt-2 h-1 w-1 shrink-0 rounded-full bg-brand-500"></span>{{ b }}
                  </li>
                {% endfor %}
              {% else %}
                {% for b in role.bullets %}
                  <li class="flex gap-2.5 text-sm leading-relaxed text-neutral-400">
                    <span class="mt-2 h-1 w-1 shrink-0 rounded-full bg-brand-500"></span>{{ b }}
                  </li>
                {% endfor %}
              {% endif %}
            </ul>
          {% endif %}

          {% if role.skills.all %}
            <div class="mt-4 flex flex-wrap gap-1.5">
              {% for s in role.skills.all %}<span class="chip">{{ s.name }}</span>{% endfor %}
            </div>
          {% endif %}
        {% endwith %}
      {% endif %}
    </div>
  </div>

  {# ------------------------------------------- daftar posisi (bertingkat) --- #}
  {% if group.is_multi %}
    {% comment %}
      Margin kiri menentukan letak garis:
      - layar kecil : setengah lebar logo → garis lurus di bawah tengah logo
      - layar besar : selebar logo + jarak → sejajar dengan kolom teks header
    {% endcomment %}
    <div class="mt-5 space-y-6 border-l-2 border-white/12 pl-6
                {% if compact %}ml-6 sm:ml-16{% else %}ml-7 sm:ml-[4.5rem]{% endif %}">
      {% for role in group.roles %}
        <div class="relative">
          {# Titik dikelilingi warna kartu supaya terlihat 'memotong' garis. #}
          <span class="absolute -left-[1.9rem] top-1.5 h-3 w-3 rounded-full ring-4 ring-ink-850
                       {% if role.is_current %}bg-gradient-to-br from-gold-400 to-brand-500{% else %}bg-neutral-600{% endif %}"></span>

          <p class="font-display text-base font-bold text-neutral-100">{{ role.position }}</p>
          <p class="mt-0.5 text-xs text-neutral-500">
            {{ role.period }} <span class="text-neutral-700">·</span>
            <span class="text-neutral-400">{{ role.duration }}</span>
            {# Tipe kerja hanya diulang di sini kalau antarposisi memang berbeda. #}
            {% if not group.employment_type_display %}
              <span class="text-neutral-700">·</span> {{ role.get_employment_type_display }}
            {% endif %}
          </p>

          {% if role.bullets and not compact %}
            <ul class="mt-2.5 space-y-1.5">
              {% for b in role.bullets %}
                <li class="flex gap-2.5 text-sm leading-relaxed text-neutral-400">
                  <span class="mt-2 h-1 w-1 shrink-0 rounded-full bg-brand-500"></span>{{ b }}
                </li>
              {% endfor %}
            </ul>
          {% elif role.bullets %}
            <ul class="mt-2 space-y-1.5">
              {% for b in role.bullets|slice:":2" %}
                <li class="flex gap-2 text-sm leading-relaxed text-neutral-400">
                  <span class="mt-2 h-1 w-1 shrink-0 rounded-full bg-brand-500"></span>{{ b }}
                </li>
              {% endfor %}
            </ul>
          {% endif %}

          {% if role.skills.all %}
            <div class="mt-3 flex flex-wrap gap-1.5">
              {% for s in role.skills.all %}<span class="chip">{{ s.name }}</span>{% endfor %}
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}
</article>