{% extends "esign/base_login.html" %}
{% load static %}
{% block content %}
<div class="d-flex justify-content-center align-items-center min-vh-100">
  <div class="container-fluid">
    <div class="row mb-4">
      <div class="col-sm-12 col-md-8 offset-md-2">
        <div class="login-wrapper">
          <div class="row">
            <div class="col-sm-12 text-center mb-3">
              <h3 class="mb-0">How did you hear about us?</h3>
            </div>
          </div>
          <form method="post">
            {% csrf_token %}
            <div class="card p-4 pb-2 shadow">
              <div class="row">
                {% for radio in form.marketing_source %}
                <div class="col-sm-12 col-md-6">
                  <div class="mb-3 bg-light border p-2 rounded">
                    <div class="form-check mb-0 position-relative">
                      <div class="form-check-input bg-transparent">{{ radio.tag }}</div>
                      <label class="form-check-label d-block" for="{{ radio.id_for_label }}">
                        {{ radio.choice_label }}
                      </label>

                      {% if "Google" in radio.choice_label %}
                        <i class="fab fa-google text-danger position-absolute end-0 top-50 translate-middle"></i>
                      {% elif "Social Media" in radio.choice_label %}
                        <i class="fab fa-facebook text-primary position-absolute end-0 top-50 translate-middle"></i>
                      {% elif "Blog" in radio.choice_label %}
                        <i class="fas fa-blog text-warning position-absolute end-0 top-50 translate-middle"></i>
                      {% elif "Advertisement" in radio.choice_label %}
                        <i class="fas fa-bullhorn text-info position-absolute end-0 top-50 translate-middle"></i>
                      {% elif "Email" in radio.choice_label %}
                        <i class="fas fa-envelope text-success position-absolute end-0 top-50 translate-middle"></i>
                      {% elif "Referral" in radio.choice_label %}
                        <i class="fas fa-user-friends text-secondary position-absolute end-0 top-50 translate-middle"></i>
                      {% elif "Event" in radio.choice_label %}
                        <i class="fas fa-calendar-check text-primary position-absolute end-0 top-50 translate-middle"></i>
                      {% elif "Others" in radio.choice_label %}
                        <i class="fas fa-ellipsis-h text-muted position-absolute end-0 top-50 translate-middle"></i>
                      {% else %}
                        <i class="fas fa-info-circle text-muted position-absolute end-0 top-50 translate-middle"></i>
                      {% endif %}
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div> 
            <div class="text-center">
              <button type="submit" class="btn btn-primary px-5 mb-3">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}