{% load static %} {% load widget_tweaks %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">
    <link rel="manifest" href="{% static 'site.webmanifest' %}">
    <title>Sign Up</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <style>
        .border-md {
            border-width: 2px;
        }
        
        .btn-facebook {
            background: #405D9D;
            border: none;
        }
        
        .btn-facebook:hover,
        .btn-facebook:focus {
            background: #314879;
        }
        
        .btn-twitter {
            background: #42AEEC;
            border: none;
        }
        
        .btn-twitter:hover,
        .btn-twitter:focus {
            background: #1799e4;
        }
        
        body {
            min-height: 100vh;
        }
        
        .form-control {
            padding: 0.8rem 0.5rem;
        }
        
        select .form-control {
            height: 52px;
            padding-left: 0.5rem;
        }
        
        .form-control::placeholder {
            color: #ccc;
            font-weight: bold;
            font-size: 0.9rem;
        }
        
        .form-control:focus {
            box-shadow: none;
        }
    </style>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <!-- <script src="https://kit.fontawesome.com/049f05bf2b.js" crossorigin="anonymous"></script> -->
</head>

<body>
    <!-- Navbar-->
    <header class="header">
        <nav class="navbar navbar-expand-lg navbar-light pt-3 pb-0">
            <div class="container">
                <!-- Navbar Brand -->
                <a href="#" class="navbar-brand">
                    <h2>Kiwi Optics</h2>
                </a>
            </div>
        </nav>
    </header>

    <div class="container">
        <div class="row py-0 mt-0 align-items-center">
            <!-- For Demo Purpose -->
            <div class="col-md-5 pr-lg-5 mb-5 mb-md-0">
                <img src="{% static 'img/fh_mobile.jpg' %}" alt="" class="img-fluid mb-2 d-none d-md-block" />
                <h1>Registra tu optica</h1>
                <p class="font-italic text-muted mb-0">
                    Administra las prescripciones de los pacientes de tu Optica desde cualquier lugar del mundo y más
                </p>
            </div>

            <!-- Registeration Form -->
            <div class="col-md-7 col-lg-6 ml-auto" id="registration-form">
                <form action="" method='POST'>{% csrf_token %}
                    <h4 class="text-success" style="display:none" id="message-form">Registra el nombre de tu óptica</h4>
                    <div class="row">
                        {{form.non_field_errors}}
                        <!-- First Name -->
                        <div class="input-group col-lg-12 mb-4">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white px-3 border-md border-right-0">
                    <i class="fa fa-user text-muted"></i>
                  </span>
                            </div>
                            {% if form.full_name.errors %} {{form.full_name|attr:"class:form-control form-control-sm bg-white border-left-0 border-md is-invalid"}}
                            <div id="{{ form.full_name.id_for_label }}" class="invalid-feedback">
                                {% for error in form.full_name.errors %} {{error}} {% endfor %}
                            </div>
                            {% else %} {{form.full_name|attr:"class:form-control form-control-sm bg-white border-left-0 border-md"}} {% endif %}
                        </div>


                        <!-- Email Address -->
                        <div class="input-group col-lg-12 mb-4">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white px-3 border-md border-right-0">
                    <i class="fa fa-envelope text-muted"></i>
                  </span>
                            </div>
                            {% if form.username.errors %} {{form.username|attr:"class:form-control form-control-sm bg-white border-left-0 border-md is-invalid"}}
                            <div id="{{ form.username.id_for_label }}" class="invalid-feedback">
                                {% for error in form.username.errors %} {{error}} {% endfor %}
                            </div>
                            {% else %} {{form.username|attr:"class:form-control form-control-sm bg-white border-left-0 border-md"}} {% endif %}
                        </div>
                        <!-- Empresa -->
                        <div class="input-group col-lg-6 mb-4">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white px-3 border-md border-right-0">
                    <i class="fa fa-eye text-muted"></i>
                  </span>
                            </div>
                            {% if form.optic_name.errors %} {{form.optic_name|attr:"class:form-control form-control-sm bg-white border-left-0 border-md is-invalid"}}
                            <div id="{{ form.optic_name.id_for_label }}" class="invalid-feedback">
                                {% for error in form.optic_name.errors %} {{error}} {% endfor %}
                            </div>
                            {% else %} {{form.optic_name|attr:"class:form-control form-control-sm bg-white border-left-0 border-md"}} {% endif %}
                        </div>

                        <!-- Phone Number -->
                        
                        <div class="input-group col-lg-6 mb-4">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white px-3 border-md border-right-0">
                    <i class="fa fa-phone-square text-muted"></i>
                  </span>
                            </div>
                            {% comment %} <select id="countryCode" name="countryCode" style="max-width: 80px" class="custom-select form-control form-control-sm bg-white border-left-0 border-md h-100 font-weight-bold text-muted">
                            <option value="">+12</option>
                            <option value="">+10</option>
                            <option value="">+15</option>
                            <option value="">+18</option>
                        </select> {% endcomment %}
                            {% if form.phone.errors %} {{form.phone|attr:"class:form-control form-control-sm bg-white border-left-0 border-md is-invalid"}}
                            <div id="{{ form.phone.id_for_label }}" class="invalid-feedback">
                                {% for error in form.phone.errors %} {{error}} {% endfor %}
                            </div>
                            {% else %} {{form.phone|attr:"class:form-control form-control-sm bg-white border-left-0 border-md"}} {% endif %}
                        </div>
                        <!-- Password -->
                        <div class="input-group col-lg-6" id="container-password">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white px-3 border-md border-right-0">
                    <i class="fa fa-lock text-muted"></i>
                  </span>
                            </div>
                            {% if form.password2.errors %} {{form.password1|attr:"class:form-control form-control-sm bg-white border-left-0 border-md is-invalid"}} {% else %} {{form.password1|attr:"class:form-control form-control-sm bg-white border-left-0 border-md"}} {% endif %}
                        </div>

                        <!-- Password Confirmation -->
                        <div class="input-group col-lg-6" id="container-passwordConfirmation">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white px-3 border-md border-right-0">
                    <i class="fa fa-lock text-muted"></i>
                  </span>
                            </div>
                            {% if form.password2.errors %} {{form.password2|attr:"class:form-control form-control-sm bg-white border-left-0 border-md is-invalid"}} {% else %} {{form.password2|attr:"class:form-control form-control-sm bg-white border-left-0 border-md"}} {% endif %}
                        </div>
                        <div class='col-12 invalid-feedback d-block'>
                            {% for error in form.password2.errors %} {{error}} {% endfor %}
                        </div>

                        <!-- Submit Button -->
                        <div class="form-group col-lg-12 mt-4 mx-auto mb-0" id="container-account">
                            <button type='submit' class="btn btn-primary border border-primary btn-block py-2">
                            <span class="">Registrar optica</span>
                        </button>
                        </div>

                        <!-- Divider Text -->
                        <div class="form-group col-lg-12 mx-auto d-flex align-items-center my-1">
                            <div class="border-bottom w-100 ml-5"></div>
                            <span class="px-2 small text-muted font-weight-bold text-muted">O</span
                        >
                        <div class="border-bottom w-100 mr-5"></div>
                    </div>
                     <!-- Social Login -->
                     <div class="form-group col-lg-12 mx-auto" id="container-register-google">
                        <a  class="btn btn-primary" style="width:100%" href="#" role="button"><i class="fab fa-google"></i
                        > Iniciar Sesion Con Google</a>
                    </div>

                    <!-- Already Registered -->
                    <div class="text-center w-100">
                        <p class="text-muted font-weight-bold">
                            ¿Ya estás registrado?
                            <a href="{% url 'users:login' %}" class="text-primary ml-2">Login</a>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>



<!--  CDN PARA FIREBASE-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.js"></script>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>

<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script src="{% static 'js/getCookie.js' %}"></script>
<script src="{% static 'js/firebase-google-login.js' %}"></script>

<script>
    $('#container-register-google').click(function(){
        get_id_token("{% url 'users:login-google' %}","{% url 'users:google' %}");
    })
    
</script>


</body>

</html>
{'avg_line_length': 50.666666666666664, 'max_line_length': 281, 'alphanum_fraction': 0.4745667522464698, 'licenses': ['MIT'], 'repository_name': 'SolanoJason/kiwioptics', 'path': 'users/templates/users/signup.html', 'size': 12468, 'lang': 'HTML'}