{% extends "base.html" %}
{% block title %}Seleccionar Local{% endblock %}
{% block page_title %}📋 Registrar Turno{% endblock %}

{% block content %}
<div style="max-width:700px;">
  <div class="flex-between mb-20">
    <div>
      <h3 style="color:var(--accent-gold); margin:0;">¿En qué local vas a registrar?</h3>
      <p class="text-muted" style="font-size:13px; margin-top:4px;">Selecciona el local para ingresar los totales del turno</p>
    </div>
  </div>

  {% for marca_key, marca_cfg in marcas.items() %}
  <div style="margin-bottom:24px;">
    <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
      <img src="{{ url_for('static', filename='images/logo_' + marca_key + '.png') }}"
           alt="{{ marca_cfg.nombre }}"
           style="width:36px; height:36px; object-fit:contain; border-radius:50%;"
           onerror="this.style.display='none'">
      <span style="font-size:13px; color:{{ marca_cfg.color }}; font-weight:700; text-transform:uppercase; letter-spacing:1px;">
        {{ marca_cfg.icono }} {{ marca_cfg.nombre }}
      </span>
    </div>

    <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:10px;">
      {% for local_key, cfg in locales.items() %}
      {% if cfg.marca == marca_key %}
      <a href="{{ url_for('registro_turno', local=local_key) }}"
         style="display:flex; align-items:center; gap:12px; padding:14px 18px;
                background:var(--bg-secondary); border:2px solid var(--border-color);
                border-radius:10px; text-decoration:none; color:var(--text-primary);
                transition:all 0.2s; cursor:pointer;"
         onmouseover="this.style.borderColor='{{ cfg.color }}'; this.style.background='var(--bg-tertiary)'"
         onmouseout="this.style.borderColor='var(--border-color)'; this.style.background='var(--bg-secondary)'">
        <span style="font-size:22px;">{{ cfg.icono }}</span>
        <div>
          <div style="font-weight:600; font-size:14px;">{{ cfg.nombre.replace(marca_cfg.nombre, '').strip() or cfg.nombre }}</div>
          <div style="font-size:11px; color:{{ cfg.color }};">{{ marca_cfg.nombre }}</div>
        </div>
      </a>
      {% endif %}
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}