{include file="_partials/head.tpl"}

<div class="page-head">
  <div>
    <h1>{lang key="shop.export.title"}</h1>
    <p class="muted"><a href="/admin/shop/products">{lang key="shop.product.back_to_list"}</a></p>
  </div>
</div>

<form method="post" action="/admin/shop/products/export" class="form" data-export-form>
  {csrf}

  <div class="export-grid">
    <div class="export-main">
      <div class="card">
        <div class="card-h"><h3>{lang key="shop.export.section_columns"}</h3>
          <span>
            <button type="button" class="btn btn-link btn-sm" data-cols-all>{lang key="shop.export.select_all"}</button>
            <span class="muted">·</span>
            <button type="button" class="btn btn-link btn-sm" data-cols-none>{lang key="shop.export.select_none"}</button>
            <span class="muted">·</span>
            <button type="button" class="btn btn-link btn-sm" data-cols-default>{lang key="shop.export.select_default"}</button>
          </span>
        </div>

        <div class="export-groups">
          [foreach var="groups" as="g"]
            <div class="export-group">
              <h4 class="export-group-title">{g.name}</h4>
              <div class="export-cols">
                [foreach var="g.columns" as="c"]
                  <label class="checkbox export-col">
                    <input type="checkbox" name="cols[]" value="{c.key}" data-col-default="[if {c.default}]1[else]0[/if]" [if {c.default}]checked[/if]>
                    <span>{c.label}</span>
                  </label>
                [/foreach]
              </div>
            </div>
          [/foreach]
        </div>
      </div>
    </div>

    <aside class="export-side">
      <div class="card">
        <div class="card-h"><h3>{lang key="shop.export.section_params"}</h3></div>

        <div class="form-group">
          <label>{lang key="shop.export.format"}</label>
          <div class="export-format">
            <label class="radio-card">
              <input type="radio" name="format" value="xlsx" checked>
              <div class="radio-card-body">
                <b>Excel (.xlsx)</b>
                <small>{lang key="shop.export.format_xlsx_hint"}</small>
              </div>
            </label>
            <label class="radio-card">
              <input type="radio" name="format" value="csv">
              <div class="radio-card-body">
                <b>CSV (.csv)</b>
                <small>{lang key="shop.export.format_csv_hint"}</small>
              </div>
            </label>
          </div>
        </div>

        <div class="form-group">
          <label>{lang key="shop.export.scope"}</label>
          <select name="scope">
            <option value="all">{lang key="shop.export.scope_all"} · {totals.all}</option>
            <option value="active">{lang key="shop.export.scope_active"} · {totals.active}</option>
            <option value="draft">{lang key="shop.export.scope_draft"} · {totals.draft}</option>
            <option value="archived">{lang key="shop.export.scope_archived"} · {totals.archived}</option>
          </select>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary btn-block">{icon name="download" size="14"} {lang key="shop.export.download_btn"}</button>
          <a href="/admin/shop/products" class="btn btn-secondary btn-block">{lang key="shop.common.cancel"}</a>
        </div>
      </div>

      <div class="card export-tip">
        <p class="muted small">
          {icon name="lightning" size="14"} {lang key="shop.export.tip"}
        </p>
      </div>
    </aside>
  </div>
</form>

<script>
(function () {
  var form = document.querySelector('[data-export-form]');
  if (!form) return;
  var checkboxes = form.querySelectorAll('input[name="cols[]"]');

  function setAll(state) { checkboxes.forEach(function (c) { c.checked = state; }); }
  function setDefaults() {
    checkboxes.forEach(function (c) { c.checked = c.getAttribute('data-col-default') === '1'; });
  }
  form.querySelector('[data-cols-all]').addEventListener('click', function () { setAll(true); });
  form.querySelector('[data-cols-none]').addEventListener('click', function () { setAll(false); });
  form.querySelector('[data-cols-default]').addEventListener('click', setDefaults);
})();
</script>

{include file="_partials/foot.tpl"}
