{% extends "base.html" %}
{% block title %}{{ t('Home') }}{% endblock %}
{% block content %}
<div class="home">
  <div class="home-head">
    <div>
      <h1>{{ t(greeting) }}{{ '،' if rtl else ',' }} {{ user.full_name or user.username }}</h1>
      <p class="muted">{{ today.isoformat() }} · {{ nm(company) if company else '' }} · {{ branches_n }} {{ t('branches') if branches_n != 1 else t('branch') }}</p>
    </div>
    {% if can_write %}<div class="home-actions">
      <a class="btn ghost" href="{{ url_for('invoices.form', kind='out_invoice') }}">{{ icon('plus') }}{{ t('New invoice') }}</a>
      <a class="btn ghost" href="{{ url_for('payments.form') }}">{{ icon('wallet') }}{{ t('Record payment') }}</a>
    </div>{% endif %}
  </div>
  <div class="home-search">{{ icon('search') }}<input id="home-search" type="search" placeholder="{{ t('Search apps and menus…') }}" autocomplete="off" aria-label="{{ t('Search apps and menus…') }}"><kbd>/</kbd></div>
  <div class="home-hits" id="home-hits" hidden></div>

  {% for grp, apps in groups %}
  <section class="app-sec">
    <h2>{{ t(grp) }}</h2>
    <div class="app-grid">
      {% for a in apps %}
      <a class="app-card" href="{{ url_for('home.open_app', key=a.key) }}" style="--c: {{ a.color }}" data-name="{{ t(a.label)|lower }} {{ a.label|lower }}">
        <span class="app-ic">{{ icon(a.icon) }}</span>
        <span class="app-tx"><b>{{ t(a.label) }}</b><small class="tone-{{ a.tone or 'none' }}">{{ a.status }}</small></span>
        {% if a.count %}<span class="app-count tone-{{ a.tone or 'none' }}">{{ a.count }}</span>{% else %}{{ icon('arrow', 'ic app-go') }}{% endif %}
      </a>
      {% endfor %}
    </div>
  </section>
  {% endfor %}

  {% if locked %}
  <section class="app-sec">
    <h2>{{ t('Available to add') }} <span>{{ t('Not in your current plan') }}</span></h2>
    <div class="app-grid">
      {% for a in locked %}
      <div class="app-card locked"><span class="app-ic">{{ icon(a.icon) }}</span>
        <span class="app-tx"><b>{{ t(a.label) }}</b><small>{{ t('Contact us to add') }}</small></span>{{ icon('lock', 'ic app-go') }}</div>
      {% endfor %}
    </div>
  </section>
  {% endif %}
</div>
{% endblock %}
{% block scripts %}
<script>
(function () {
  // search apps by name, and every menu screen by its label
  var menu = [{% for a in nav_apps()[0] %}{% for s in a.sections %}{% for ln in s.links %}{u: {{ ln.url|tojson }}, l: {{ t(ln.label)|tojson }}, a: {{ t(a.label)|tojson }}, i: {{ ln.icon|tojson }}},{% endfor %}{% endfor %}{% endfor %}];
  var input = document.getElementById('home-search'), hits = document.getElementById('home-hits');
  var cards = document.querySelectorAll('.app-card:not(.locked)');
  function esc(s) { return s.replace(/[&<>"]/g, function (c) { return {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;'}[c]; }); }
  input.addEventListener('input', function () {
    var term = input.value.trim().toLowerCase(), seen = {};
    cards.forEach(function (c) { c.classList.toggle('dim', !!term && c.dataset.name.indexOf(term) < 0); });
    var found = term ? menu.filter(function (m) {
      if (seen[m.u] || m.l.toLowerCase().indexOf(term) < 0) return false;
      return (seen[m.u] = true);
    }).slice(0, 8) : [];
    hits.hidden = !found.length;
    hits.innerHTML = found.map(function (m) {
      return '<a href="' + esc(m.u) + '"><svg class="ic"><use href="#i-' + esc(m.i) + '"/></svg><b>' + esc(m.l) + '</b><small>' + esc(m.a) + '</small></a>';
    }).join('');
  });
  input.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') { var f = hits.querySelector('a') || document.querySelector('.app-card:not(.dim):not(.locked)'); if (f) location.href = f.href; }
    if (e.key === 'Escape') { input.value = ''; input.dispatchEvent(new Event('input')); input.blur(); }
  });
  document.addEventListener('keydown', function (e) {
    var tag = (e.target.tagName || '').toLowerCase();
    if ((e.key === '/' && tag !== 'input' && tag !== 'textarea' && tag !== 'select') || (e.key === 'k' && (e.metaKey || e.ctrlKey))) {
      e.preventDefault(); input.focus();
    }
  });
})();
</script>
{% endblock %}