{% extends "base.html" %}
{% block titulo %}{{ 'Editar' if id_cli else 'Nuevo' }} cliente{% endblock %}
{% block encabezado %}{{ 'Editar cliente' if id_cli else 'Nuevo cliente' }}{% endblock %}
{% block contenido %}

<div class="tarjeta" style="max-width:820px">
  <form class="tarjeta__cuerpo" method="post">
    {% if volver %}<input type="hidden" name="volver" value="{{ volver }}">
    <p class="muted" style="margin-top:0">Al guardar volverá al documento que estaba creando.</p>{% endif %}

    <div class="form-grid">
      <div class="campo">
        <label>RUT *</label>
        <div class="rut-box">
          <input name="rut" data-rut value="{{ registro.get('rut','') }}" required>
          <span>-</span>
          <input name="dv" data-dv value="{{ registro.get('dv','') }}">
        </div>
      </div>
      <div class="campo"><label>Nombre / Razón social *</label>
        <input name="nombre" value="{{ registro.get('nombre','') }}" autofocus required></div>

      <div class="campo full"><label>Giro comercial</label>
        <input name="giro" value="{{ registro.get('giro','') }}"></div>

      <div class="campo"><label>Dirección</label>
        <input name="direccion" value="{{ registro.get('direccion','') }}"></div>
      <div class="campo"><label>Comuna</label>
        <input name="comuna" value="{{ registro.get('comuna','') }}"></div>

      <div class="campo"><label>Correos</label>
        <input name="correos" value="{{ registro.get('correos','') }}"></div>
      <div class="campo"><label>Celular / WhatsApp</label>
        <input name="telefono" value="{{ registro.get('telefono','') }}" inputmode="numeric" placeholder="9…"></div>
    </div>

    <div class="acciones">
      <button class="btn btn--primario">Guardar cliente</button>
      <a class="btn btn--fantasma" href="{{ volver or url_for('clientes.lista') }}">Cancelar</a>
    </div>
  </form>
</div>
{% endblock %}