{editing.inventory ? 'Mal sorumlusu düzenle' : 'Mal sorumlusu ekle'}

{#if editing.inventory} {/if}

{editing.inventory ? 'Var olan kaydı güncelleyebilir, yeni şifre vermek için alanı doldurabilirsiniz.' : 'Depo sürecini yönetecek kullanıcıyı tanımlayın.'}

{#if feedback.inventory}

{feedback.inventory.text}

{/if}

Kullanıcı adı Görünen ad

Geçici şifre

Kayıtlı mal sorumluları

Oluşturma tarihi ve kullanıcı adı ile listelenir.

{#if loading.inventory}

Liste yükleniyor...

{:else if lists.inventory.length === 0}

Henüz mal sorumlusu oluşturulmadı.

{:else} {#each lists.inventory as manager} {/each}

Görünen ad	Kullanıcı adı	Oluşturma tarihi	İşlemler
{manager.displayName}	`{manager.username}`	{formatDate(manager.createdAt)}

{/if}

{editing.vehicles ? 'Araç kaydını düzenle' : 'Araç oluştur'}

{#if editing.vehicles} {/if}

{editing.vehicles ? 'Araç bilgilerini güncelleyebilir, plaka değişikliklerini kaydedebilirsiniz.' : 'Yakıt transferinde kullanılacak araç bilgilerini girin.'}

{#if feedback.vehicles}

{feedback.vehicles.text}

{/if}

Marka Model

Model yılı Plaka

Araç listesi

Plaka bazlı kayıtlarınızı buradan görüntüleyin.

{#if loading.vehicles}

Liste yükleniyor...

{:else if lists.vehicles.length === 0}

Kayıtlı aracınız bulunmuyor.

{:else} {#each lists.vehicles as vehicle} {/each}

Araç	Model yılı	Plaka	Eklenme	İşlemler
{vehicle.brand} {vehicle.model}	{vehicle.year}	`{vehicle.plate}`	{formatDate(vehicle.createdAt)}

{/if}

{editing.units ? 'Birlik kaydını düzenle' : 'Birlik ekle'}

{#if editing.units} {/if}

{editing.units ? 'Birlik ve sorumlu bilgilerini güncelleyebilirsiniz.' : 'Birlik ve sorumlularını ilişkilendirerek kayıt edin.'}

{#if feedback.units}

{feedback.units.text}

{/if} Birlik adı Adres

</label>

<div class="field-grid two">
            <label>
              <span>Sorumlu adı soyadı</span>
              <input placeholder="Yzb. Murat Kaya" bind:value={unitForm.contactName} required />
            </label>
            <label>
              <span>Rütbesi</span>
              <input placeholder="Yüzbaşı" bind:value={unitForm.contactRank} required />
            </label>
          </div>

<div class="field-grid two">
            <label>
              <span>Sicil</span>
              <input placeholder="MK4587" bind:value={unitForm.contactRegistry} required />
            </label>
            <label>
              <span>TC Kimlik No</span>
              <input
                placeholder="25478963210"
                bind:value={unitForm.contactIdentity}
                required
              />
            </label>
          </div>

<label>
            <span>İrtibat numarası</span>
            <input placeholder="+90 5.." bind:value={unitForm.contactPhone} required />
          </label>

<button type="submit" class="primary" disabled={submitting.units}>
                {#if submitting.units}
                  {editing.units ? 'Güncelleniyor...' : 'Kaydediliyor...'}
                {:else}
                  {editing.units ? 'Güncelle' : 'Kaydet'}
                {/if}
              </button>
            </form>

<div class="panel-card list-card">
          <header class="list-header">
            <div>
              <h3>Birlik listesi</h3>
              <p>Sorumlu bilgileri ile birlikte görüntülenir.</p>
            </div>
            <button
              type="button"
              on:click={() => loadSection('units', { force: true })}
              disabled={loading.units}
            >
              Yenile
            </button>
          </header>

{#if loading.units}
            <p class="info">Liste yükleniyor...</p>
          {:else if lists.units.length === 0}
            <p class="info">Kayıtlı birlik bulunmuyor.</p>
          {:else}
            <div class="unit-grid">
              {#each lists.units as unit}
                <article class="unit-card">
                  <header>
                    <h4>{unit.name}</h4>
                    <span>{formatDate(unit.createdAt)}</span>
                  </header>
                  <p class="meta">{unit.address}</p>
                  <div class="unit-tags">
                    <span>STK: {unit.stk}</span>
                    <span>BTK: {unit.btk}</span>
                  </div>
                  <div class="unit-contact">
                    <strong>{unit.contactName}</strong>
                    <span>{unit.contactRank} • {unit.contactRegistry}</span>
                    <span>{unit.contactPhone}</span>
                    <span>TC: {unit.contactIdentity}</span>
                  </div>
                  <div class="actions">
                    <button type="button" class="ghost" on:click={() => startEdit('units', unit)}>
                      Düzenle
                    </button>
                    <button
                      type="button"
                      class="ghost danger"
                      on:click={() => handleDelete('units', unit.id)}
                      disabled={removing.units === unit.id}
                    >
                      {#if removing.units === unit.id}
                        Siliniyor...
                      {:else}
                        Sil
                      {/if}
                    </button>
                  </div>
                </article>
              {/each}
            </div>
          {/if}

</div>
      </div>
    {:else if activeSection === 'personnel'}
      <div class="section-layout">
        <form class="panel-card form-card" on:submit|preventDefault={handlePersonnelSubmit}>
          <div class="form-header">
            <h3>{editing.personnel ? 'Personel kaydını düzenle' : 'Yakıt personeli ekle'}</h3>
            {#if editing.personnel}
              <button type="button" class="ghost" on:click={() => cancelEdit('personnel')}>
                İptal
              </button>
            {/if}
          </div>
          <p class="hint">
            {editing.personnel
              ? 'Personel kimlik ve irtibat bilgilerini güncelleyebilirsiniz.'
              : 'Yakıt veren personelin kimlik ve iletişim bilgilerini kaydedin.'}
          </p>

{#if feedback.personnel}
            <div class="message {feedback.personnel.type}">{feedback.personnel.text}</div>
          {/if}

<label>
            <span>Adı soyadı</span>
            <input placeholder="Astsb. Cahit Demir" bind:value={personnelForm.fullName} required />
          </label>

<div class="field-grid two">
            <label>
              <span>Rütbesi</span>
              <input placeholder="Astsubay" bind:value={personnelForm.rank} required />
            </label>
            <label>
              <span>Sicili</span>
              <input placeholder="CD5561" bind:value={personnelForm.registryNumber} required />
            </label>
          </div>

<div class="field-grid two">
            <label>
              <span>TC Kimlik No</span>
              <input placeholder="14523698741" bind:value={personnelForm.identityNumber} required />
            </label>
            <label>
              <span>İrtibat numarası</span>
              <input placeholder="+90 5.." bind:value={personnelForm.phone} required />
            </label>
          </div>

<button type="submit" class="primary" disabled={submitting.personnel}>
            {#if submitting.personnel}
              {editing.personnel ? 'Güncelleniyor...' : 'Kaydediliyor...'}
            {:else}
              {editing.personnel ? 'Güncelle' : 'Kaydet'}
            {/if}
          </button>
        </form>

<div class="panel-card list-card">
          <header class="list-header">
            <div>
              <h3>Yakıt personeli listesi</h3>
              <p>Sicil numarası ve iletişim bilgileriyle görüntülenir.</p>
            </div>
            <button
              type="button"
              on:click={() => loadSection('personnel', { force: true })}
              disabled={loading.personnel}
            >
              Yenile
            </button>
          </header>

{#if loading.personnel}
            <p class="info">Liste yükleniyor...</p>
          {:else if lists.personnel.length === 0}
            <p class="info">Kayıtlı yakıt personeli bulunmuyor.</p>
          {:else}
            <table class="simple-table">
              <thead>
                <tr>
                  <th>Adı soyadı</th>
                  <th>Rütbesi</th>
                  <th>Sicil</th>
                  <th>İrtibat</th>
                  <th>İşlemler</th>
                </tr>
              </thead>
              <tbody>
                {#each lists.personnel as person}
                  <tr>
                    <td>{person.fullName}</td>
                    <td>{person.rank}</td>
                    <td><code>{person.registryNumber}</code></td>
                    <td>
                      <div>{person.phone}</div>
                      <div class="personnel-meta">TC: {person.identityNumber}</div>
                    </td>
                    <td class="actions">
                      <button type="button" class="ghost" on:click={() => startEdit('personnel', person)}>
                        Düzenle
                      </button>
                      <button
                        type="button"
                        class="ghost danger"
                        on:click={() => handleDelete('personnel', person.id)}
                        disabled={removing.personnel === person.id}
                      >
                        {#if removing.personnel === person.id}
                          Siliniyor...
                        {:else}
                          Sil
                        {/if}
                      </button>
                    </td>
                  </tr>
                {/each}
              </tbody>
            </table>
          {/if}

</div>
      </div>
    {/if}
  </section>
</div>

.section-nav {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

.section-nav button {
    position: relative;
    text-align: left;
    border: 1px solid #d4ddee;
    background: linear-gradient(135deg, #ffffff, #f4f7ff);
    border-radius: 16px;
    padding: 1.1rem 1.15rem 1.05rem 1.15rem;
    color: #27344d;
    cursor: pointer;
    display: grid;
    gap: 0.45rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

.section-nav button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(88, 115, 173, 0.16);
  }

.section-nav button.selected {
    border-color: #4c6ef5;
    box-shadow: 0 24px 46px rgba(76, 110, 245, 0.25);
    background: linear-gradient(135deg, #4c6ef5, #6f8bff);
    color: #ffffff;
  }

.section-nav button span {
    display: block;
    font-weight: 700;
    color: inherit;
    font-size: 1rem;
  }

.section-nav button small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: inherit;
    line-height: 1.4;
    opacity: 0.85;
  }

.section-nav button.selected small {
    color: rgba(255, 255, 255, 0.8);
  }

.icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(76, 110, 245, 0.12);
    display: grid;
    place-items: center;
    color: inherit;
  }

.section-nav button.selected .icon-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
  }

.panel-area {
    margin-top: 0.5rem;
  }

.section-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    align-items: start;
  }

@media (max-width: 900px) {
    .section-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

.panel-card {
    border: 1px solid #dde3f1;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 48px rgba(88, 115, 173, 0.18);
    padding: 1.9rem;
    display: grid;
    gap: 1.25rem;
    color: #2a3856;
  }

.form-card h3,
  .list-card h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #1d2943;
  }

.form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

.form-header .ghost {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
  }

.hint {
    margin: -0.25rem 0 0.75rem;
    color: #5d6a83;
    font-size: 0.95rem;
  }

.field-grid {
    display: grid;
    gap: 1rem;
  }

.field-grid.two {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

label {
    display: grid;
    gap: 0.35rem;
    color: #26324d;
    font-weight: 600;
  }

input,
  textarea {
    border: 1px solid rgba(121, 139, 189, 0.45);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    background: #f9fbff;
    color: #1f2d44;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

textarea {
    resize: vertical;
    min-height: 70px;
  }

input:focus,
  textarea:focus {
    outline: none;
    border-color: #4c6ef5;
    box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.2);
    background: #ffffff;
  }

input:disabled {
    background: #eef2fb;
    color: #7a88a8;
    cursor: not-allowed;
  }

input[readonly] {
    background: #f6f8ff;
    color: #7a88a8;
  }

.primary {
    align-self: flex-start;
    background: linear-gradient(135deg, #4c6ef5, #6f8bff);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 18px 32px rgba(76, 110, 245, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

.primary[disabled] {
    background: #b5c0e3;
    cursor: wait;
    box-shadow: none;
  }

.primary:not([disabled]):hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 40px rgba(76, 110, 245, 0.38);
  }

.message {
    border-radius: 12px;
    padding: 0.8rem 1rem;
    font-weight: 500;
    font-size: 0.95rem;
  }

.message.success {
    background: rgba(76, 175, 80, 0.12);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.3);
  }

.message.error {
    background: rgba(229, 57, 53, 0.12);
    color: #c62828;
    border: 1px solid rgba(229, 57, 53, 0.28);
  }

.list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

.list-header h3 {
    margin: 0;
  }

.list-header p {
    margin: 0.3rem 0 0;
    color: #5d6a83;
    font-size: 0.9rem;
  }

.list-header button {
    border: 1px solid #c9d6ed;
    background: #edf2ff;
    color: #3451a3;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease;
  }

.list-header button[disabled] {
    color: #a6b4d5;
    border-color: #d8e1f3;
    cursor: wait;
  }

.info {
    margin: 0;
    color: #5d6a83;
    font-size: 0.95rem;
  }

.simple-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 16px;
    overflow: hidden;
  }

.simple-table th {
    background: #f0f4ff;
    color: #2a3856;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    text-align: left;
  }

.simple-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e7ecf7;
    color: #364564;
    vertical-align: top;
  }

.simple-table tr:last-child td {
    border-bottom: none;
  }

.actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }

.ghost {
    border: 1px solid #d3dcf0;
    background: #f8faff;
    color: #30426a;
    border-radius: 10px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

.ghost:hover {
    background: #e9f0ff;
    border-color: #b8c6ea;
  }

.ghost.danger {
    border-color: #f5c7c5;
    background: #fff0f0;
    color: #c62828;
  }

.ghost.danger:hover {
    background: #ffe1df;
    border-color: #f2a8a5;
  }

code {
    background: rgba(76, 110, 245, 0.1);
    color: #2644a6;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
  }

.unit-grid {
    display: grid;
    gap: 1rem;
  }

.unit-card {
    border: 1px solid #dce4f5;
    border-radius: 18px;
    padding: 1.35rem;
    background: #f6f9ff;
    display: grid;
    gap: 0.6rem;
  }

.unit-card header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }

.unit-card header h4 {
    margin: 0;
    font-size: 1.05rem;
    color: #1d2943;
  }

.unit-card header span {
    color: #7a88a8;
    font-size: 0.85rem;
  }

.unit-card .meta {
    margin: 0;
    color: #4e5d78;
    line-height: 1.4;
  }

.unit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

.unit-tags span {
    background: rgba(76, 110, 245, 0.12);
    color: #354fa8;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
  }

.unit-contact {
    display: grid;
    gap: 0.25rem;
    color: #4e5d78;
    font-size: 0.9rem;
  }

.unit-contact strong {
    color: #1d2943;
  }

.unit-card .actions {
    margin-top: 0.75rem;
  }

.personnel-meta {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #7a88a8;
  }

@media (max-width: 640px) {
    .panel-card {
      padding: 1.5rem;
    }

.section-nav button {
      padding: 0.85rem 1rem;
    }

.simple-table th,
    .simple-table td {
      padding: 0.75rem 0.85rem;
    }
  }
</style>