{% extends "registration/base.html" %}
{% load static %}

{% block body %}
<body class="hold-transition login-page">
    <div style="color: #444; 
    font-weight: 700;cursor: pointer; font-size: 35px;text-align: left; box-sizing: border-box; padding-left: 20px; padding-top: 10px" class="login-logo">
        <a href="#"><b>Youta</b></a>
    </div>
    <div class="container">
        <div class="content" id="grp-content-container">
            <div class="row justify-content-center">
                <div class="col-8">
                    <h1 class="mt-2">Register</h1>
                    <hr class="mt-0 mb-4">
                </div>
            </div>
            <div class="row justify-content-left">
                <div class="col-8">
                    <p style="font-size: 16px; font-family: sans-serif;">Please input OAuth2 credential informations of your Google Calendar Application.</p>
                </div>
            </div>
            <div style="height: 25px"></div>
            <div class="row justify-content-left">
                <div class="col-9">
                    {{ form.non_field_errors }}
                </div>
            </div>
            <form class="form-horizontal" data-toggle="validator" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label for="id_email" class="col-sm-2 control-label">Email<span style="color:red;">*</span></label>
                    <div class="col-sm-10">
                        {{ form.email }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_google_oauth2_client_id" class="col-sm-2 control-label">Google OAuth2 Client ID<span style="color:red;">*</span></label>
                    <div class="col-sm-10">
                        {{ form.google_oauth2_client_id }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_google_oauth2_secrete" class="col-sm-2 control-label">Google OAuth2 Secrete<span style="color:red;">*</span></label>
                    <div class="col-sm-10">
                        {{ form.google_oauth2_secrete }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_phone_number" class="col-sm-2 control-label">First Name</label>
                    <div class="col-sm-10">
                        {{ form.first_name }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_last_location" class="col-sm-2 control-label">Last Name</label>
                    <div class="col-sm-10">
                        {{ form.last_name }}
                    </div>
                </div>                    
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">Register</button>
                    </div>
                </div>
            </form>
        </div>
    
    </div>
</body>
{% endblock body %}

