<section class="module-page storage-page">
  <div class="module-head">
    <div>
      <h2 class="module-title">Depo</h2>
      <p class="module-sub">Ürünlerinizi buradan görebilir, arayabilir ve yönetebilirsiniz.</p>
    </div>

    <div class="storage-head-actions">
      <button type="button" class="storage-add-btn" id="storage-add-btn">
        + Yeni Ürün
      </button>
    </div>
  </div>

  <div class="storage-toolbar">
    <div class="storage-search-wrap">
      <input
        type="text"
        id="storage-search"
        class="storage-search"
        placeholder="Ürün ara..."
        autocomplete="off"
      >
    </div>

    <div class="storage-filter-wrap">
      <select id="storage-sort" class="storage-sort">
        <option value="alpha">Alfabetik</option>
        <option value="newest">Son eklenen</option>
        <option value="stock_desc">Stok azalan</option>
        <option value="stock_asc">Stok artan</option>
      </select>
    </div>
  </div>

  <div class="storage-list-wrap">
    <div class="storage-list-head">
      <div>Ürün Adı</div>
      <div>Stok Adedi</div>
      <div>Fiyat</div>
      <div>İşlem</div>
    </div>

    <div id="storage-list" class="storage-list">
      <div class="storage-empty">Ürünler yükleniyor...</div>
    </div>
  </div>

  <div class="storage-drawer-backdrop" id="storage-drawer-backdrop"></div>

  <aside class="storage-drawer" id="storage-drawer">
    <div class="storage-drawer-head">
      <div>
        <h3 id="storage-drawer-title">Yeni Ürün</h3>
        <p id="storage-drawer-sub">Ürün bilgilerini doldurun.</p>
      </div>

      <button type="button" class="storage-drawer-close" id="storage-drawer-close">×</button>
    </div>

    <form id="storage-form" class="storage-form" autocomplete="off">
      <input type="hidden" id="storage-product-id">

      <div class="storage-form-group">
        <label for="storage-name">Ürün Adı</label>
        <input type="text" id="storage-name" maxlength="120" required>
      </div>

      <div class="storage-form-row">
        <div class="storage-form-group">
          <label for="storage-stock">Stok / Adet</label>
          <input type="number" id="storage-stock" min="0" step="1" required>
        </div>

        <div class="storage-form-group">
          <label for="storage-price">Fiyat</label>
          <input type="number" id="storage-price" min="0" step="0.01" required>
        </div>
      </div>

      <div class="storage-form-group">
        <label for="storage-description">Açıklama</label>
        <textarea id="storage-description" rows="3" placeholder="İsteğe bağlı açıklama"></textarea>
      </div>

      <div class="storage-form-group">
        <label for="storage-cost">Maliyet (Opsiyonel)</label>
        <input type="number" id="storage-cost" min="0" step="0.01">
      </div>

      <div class="storage-form-group">
        <label for="storage-tag-input">Etiketler (Opsiyonel)</label>
        <div class="storage-tags-box" id="storage-tags-box">
          <div class="storage-tags-list" id="storage-tags-list"></div>
          <input
            type="text"
            id="storage-tag-input"
            class="storage-tag-input"
            placeholder="Virgül ile ekle"
          >
        </div>
        <small class="storage-help">Örnek: halı, elektronik, vitrin</small>
      </div>

      <div class="storage-form-actions">
        <button type="button" class="storage-cancel-btn" id="storage-cancel-btn">Vazgeç</button>
        <button type="submit" class="storage-save-btn">Kaydet</button>
      </div>
    </form>
  </aside>
</section>