{% extends "base.html" %}
{% block title %}QR Code - Ramal {{ ext }}{% endblock %}
{% set active = "provision" %}
{% block content %}
<div class="container-fluid">
  <h4 class="mb-3">📱 QR Code — Ramal {{ ext }}</h4>

  <div class="row">
    <div class="col-md-6">
      <div class="card text-center">
        <div class="card-header">
          <strong>{{ display_name }}</strong> ({{ ext }})
        </div>
        <div class="card-body">
          <img src="/app/pbx/provision/qrcode/{{ ext }}" alt="QR Code"
               class="img-fluid" style="max-width: 300px;">
          <p class="mt-2 text-muted">
            Escaneie com o app PortSIP, Zoiper, Linphone, GS Wave ou outro softphone
          </p>
          <button class="btn btn-primary" onclick="window.print()">🖨️ Imprimir</button>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header"><strong>Instruções</strong></div>
        <div class="card-body">
          <ol>
            <li><strong>Baixe um softphone</strong> no seu celular:
              <ul>
                <li>📱 <a href="https://www.portsip.com/download-portsip-softphone/" target="_blank">PortSIP</a> (recomendado)</li>
                <li>📱 <a href="https://www.zoiper.com/en/download" target="_blank">Zoiper</a></li>
                <li>📱 <a href="https://www.linphone.org/" target="_blank">Linphone</a></li>
                <li>📱 <a href="https://www.grandstream.com/products/gs-wave" target="_blank">GS Wave</a></li>
              </ul>
            </li>
            <li><strong>Abra o app</strong> e toque em "Scan QR Code" ou "Configurar por QR"</li>
            <li><strong>Aponte</strong> para o QR code ao lado e pronto!</li>
          </ol>
        </div>
      </div>

      <div class="card">
        <div class="card-header"><strong>Configuração Manual</strong></div>
        <div class="card-body">
          <table class="table table-sm">
            <tr><th>Campo</th><th>Valor</th></tr>
            <tr><td>Domínio/Servidor</td><td><code>{{ server }}</code></td></tr>
            <tr><td>Usuário</td><td><code>{{ ext }}</code></td></tr>
            <tr><td>Senha</td><td><code>{{ password }}</code></td></tr>
            <tr><td>Nome</td><td>{{ display_name }}</td></tr>
            <tr><td>Porta</td><td>5060</td></tr>
            <tr><td>Transporte</td><td>UDP</td></tr>
          </table>
          <div class="alert alert-warning small">
            ⚠️ Para configurar <strong>fora da rede local</strong>, o servidor precisa estar acessível via IP público ou VPN.
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="text-center mt-3">
    <a href="/app/pbx/provision" class="btn btn-outline-secondary">← Voltar</a>
  </div>
</div>
{% endblock %}