{% load i18n %}
<div class="row g-4">
  <div class="col-md-7">

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">SMTP Server</h6>
      </div>
      <div class="card-body d-flex flex-column gap-3">

        <div class="row g-3">
          <div class="col-8">
            <label class="form-label text-muted mb-1" style="font-size:.8rem;">SMTP Host</label>
            <input type="text" class="form-control form-control-sm" value="smtp.gmail.com" placeholder="smtp.example.com">
          </div>
          <div class="col-4">
            <label class="form-label text-muted mb-1" style="font-size:.8rem;">Port</label>
            <input type="number" class="form-control form-control-sm" value="587" placeholder="587">
          </div>
        </div>

        <div class="row g-3">
          <div class="col-6">
            <label class="form-label text-muted mb-1" style="font-size:.8rem;">Username</label>
            <input type="text" class="form-control form-control-sm" value="noreply@mycompany.com" placeholder="user@example.com">
          </div>
          <div class="col-6">
            <label class="form-label text-muted mb-1" style="font-size:.8rem;">Password</label>
            <input type="password" class="form-control form-control-sm" value="••••••••••••">
          </div>
        </div>

        <div>
          <label class="form-label text-muted mb-1" style="font-size:.8rem;">From Email</label>
          <input type="email" class="form-control form-control-sm" value="My Business &lt;noreply@mycompany.com&gt;" placeholder="Name &lt;email@example.com&gt;">
        </div>
        <hr class="my-0">

        <div class="d-flex align-items-center gap-4">
          <div class="form-check d-flex align-items-center gap-2 mb-0">
            <input class="form-check-input mt-0" type="checkbox" id="use_tls" checked>
            <label class="form-check-label" for="use_tls" style="font-size:.85rem;">Use TLS</label>
          </div>
          <div class="form-check d-flex align-items-center gap-2 mb-0">
            <input class="form-check-input mt-0" type="checkbox" id="use_ssl">
            <label class="form-check-label" for="use_ssl" style="font-size:.85rem;">Use SSL</label>
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center pt-1">
          <button class="btn btn-sm btn-outline-secondary">
            <span class="bi bi-send me-1"></span>Test Connection
          </button>
          <button class="btn btn-primary btn-sm px-4">Save</button>
        </div>

      </div>
    </div>

    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
        <h6 class="fw-semibold mb-0">SendGrid</h6>
        <span class="badge" style="background:#f1f5f9;color:#64748b;font-size:.7rem;">SMTP Alternative</span>
      </div>
      <div class="card-body d-flex flex-column gap-3">

        <div>
          <label class="form-label text-muted mb-1" style="font-size:.8rem;">SendGrid API Key</label>
          <input type="password" class="form-control form-control-sm" value="" placeholder="SG.xxxxxxxxx">
          <div class="text-muted mt-1" style="font-size:.75rem;">
            If filled, SendGrid is used instead of SMTP.
          </div>
        </div>

        <div class="d-flex justify-content-end">
          <button class="btn btn-primary btn-sm px-4">Save</button>
        </div>

      </div>
    </div>

  </div>
</div>