{% extends "application_form_base.html" %}
{% load static %}

{% block content %}
<link rel="stylesheet" href="{% static "css/application.css" %}">

<div id="input_form" ng-controller="applicationController">
    <form name="applicationForm">
        <div class="col-xs-12">
            <h3>Killan jäseneksi liittyminen on helppoa ja hauskaa!</h3>
            <h3>Täytä vain alla oleva lomake</h3>
            <h4>Muista myös maksaa jäsenmaksusi!</h4>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="form-group">
                <label for="firstNameField">Etunimi: </label>
                <input id="firstNameField" required type="text" placeholder="Sähkö" class="form-control" ng-model="member.first_name"></input>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="form-group">
                <label for="lastNameField">Sukunimi: </label>
                <input id="lastNameField" required type="text" placeholder="Insinööri" class="form-control" ng-model="member.last_name"></input>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="form-group">
                <label for="emailField">Sähköposti: </label>
                <input id="emailField" required type="text" placeholder="sahko.insinoori@aalto.fi" class="form-control" ng-model="member.email"></input>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="form-group">
                <label>Olen AYY:n jäsen: </label>
                <input type="checkbox" autocomplete="off" id="AYY" value="0" ng-model="member.AYY">
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="form-group">
                <label>Haluan saada viikottaisia jäsenmaileja: </label>
                <input type="checkbox" class="custom-control-input" autocomplete="off" id="JAS" value="0" ng-model="member.jas">
                </label>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div class="form-group">
                <label>Asuinkunta: </label>
                <input id="PORField" required type="text" placeholder="Otaniemi" class="form-control" ng-model="member.POR"></input>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <div
             id="captcha"
             vc-recaptcha
             theme="'light'"
             key="'6LevHAcUAAAAAA45B7c-7qja-2aSwHztr9xb4K2Z'"
             on-create="setWidgetId(widgetId)"
             on-success="setResponse(response)"
             on-expire="cbExpiration()"
             ></div>
        </div>
        <div class="col-xs-10 col-xs-offset-1">
            <button ng-click="applicationForm.$valid && send()" type="submit" class="btn btn-success" id="sendmember">Liity</button>
        </div>
    </form>
</div>
{% endblock content %}