{% extends "base.html.twig" %}

{% block ExtraCSSFiles %}
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
    <script>
		WebFont.load( {
			google: {
				"families": [ "Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700" ]
			},
			active: function() {
				sessionStorage.fonts = true;
			}
		} );
    </script>


    {# custom css file of this page#}
    <link href="{{ asset('css/r-form.css') }}" rel="stylesheet" type="text/css" />

{% endblock %}

{% block MainContent %}

<!-- end::Head -->

<!-- begin::Body -->

    <div class="kt-grid kt-grid--ver kt-grid--root">
        <div class="kt-grid kt-grid--hor kt-grid--root  kt-login kt-login--v1" id="kt_login">
            <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--desktop kt-grid--ver-desktop kt-grid--hor-tablet-and-mobile">

                <!--begin::Content-->
                <div class="kt-grid__item kt-grid__item--fluid  kt-grid__item--order-tablet-and-mobile-1  kt-login__wrapper">

                    <!--begin::Head-->
                    <div class="kt-title__heading kt-login-form__toggle active">
                        <div class="kt-login__head">

                            <div class="dropdown">
                                <span class="kt-login__signup-label">Don't have an account yet?</span>
                                <a data-toggle="dropdown" class="btn kt-link kt-login__signup-link" aria-expanded="false">Sign Up!</a>
                                <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(1055px, 2099px, 0px); top: 0px; left: 0px; will-change: transform;">
                                    <ul class="kt-nav">
                                        <li class="kt-nav__item">
                                            <a class="kt-nav__link" href="/security/student-registration"><i class="kt-nav__link-icon flaticon-user"></i><span class="kt-nav__link-text">Student</span></a>
                                        </li>
                                        <li class="kt-nav__item">
                                            <a class="kt-nav__link" href="/security/teacher-registration"><i class="kt-nav__link-icon flaticon2-contract"></i><span class="kt-nav__link-text">Teacher</span></a>
                                        </li>
                                        <li class="kt-nav__item">
                                            <a class="kt-nav__link" href="/security/admin-registration"><i class="kt-nav__link-icon flaticon-customer"></i><span class="kt-nav__link-text">Admin</span></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--end::Head-->

                    <div class="kt-login-form__toggle kt-form__signin">
                        <div class="kt-login__body">

                            <!--begin::Signin-->
                            <div class="kt-login__form">
                                <div class="kt-login__title">
                                    <h3>Sign Up</h3>
                                    <a href="/guardian/login/" class="btn kt-link kt-login__signup-link" aria-expanded="false">Sign Up as Guardian!</a>
                                </div>



                                <!--begin::Form-->
                                <form class="kt-form" action="/" novalidate="novalidate" method="post">
                                    <div class="form-group">
                                        <input class="form-control" type="text" placeholder="First Name" name="first name" autocomplete="off" value="">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" type="text" placeholder="Last Name" name="last name">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" type="email" placeholder="Email" name="Email">
                                    </div>
                                    <div class="form-group">
                                        <input class="form-control" type="password" placeholder="Password" name="password">
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-3 col-form-label" style="line-height: 38px;">Gender</label>
                                        <div class="col-9">
                                            <div class="kt-radio-inline">
                                                <label class="kt-radio">
                                                    <input type="radio" name="radio4"> Male
                                                    <span></span>
                                                </label>
                                                <label class="kt-radio">
                                                    <input type="radio" checked="checked" name="radio4"> Female
                                                    <span></span>
                                                </label>
                                                <label class="kt-radio">
                                                    <input type="radio" name="radio4"> Other
                                                    <span></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-3 col-sm-12">Limiting Selections</label>
                                        <div class="col-lg-9 col-md-9 col-sm-12">
                                            <select class="form-control kt-select2" id="kt_select2_9" name="param" multiple>
                                                <option></option>
                                                <optgroup label="Alaskan/Hawaiian Time Zone">
                                                    <option value="AK">Alaska</option>
                                                    <option value="HI">Hawaii</option>
                                                </optgroup>
                                                <optgroup label="Pacific Time Zone">
                                                    <option value="CA">California</option>
                                                    <option value="NV" selected>Nevada</option>
                                                    <option value="OR">Oregon</option>
                                                    <option value="WA">Washington</option>
                                                </optgroup>
                                                <optgroup label="Mountain Time Zone">
                                                    <option value="AZ">Arizona</option>
                                                    <option value="CO">Colorado</option>
                                                    <option value="ID">Idaho</option>
                                                    <option value="MT">Montana</option>
                                                    <option value="NE">Nebraska</option>
                                                    <option value="NM">New Mexico</option>
                                                    <option value="ND">North Dakota</option>
                                                    <option value="UT">Utah</option>
                                                    <option value="WY">Wyoming</option>
                                                </optgroup>
                                                <optgroup label="Central Time Zone">
                                                    <option value="AL">Alabama</option>
                                                    <option value="AR">Arkansas</option>
                                                    <option value="IL">Illinois</option>
                                                    <option value="IA">Iowa</option>
                                                    <option value="KS">Kansas</option>
                                                    <option value="KY">Kentucky</option>
                                                    <option value="LA">Louisiana</option>
                                                    <option value="MN">Minnesota</option>
                                                    <option value="MS">Mississippi</option>
                                                    <option value="MO">Missouri</option>
                                                    <option value="OK">Oklahoma</option>
                                                    <option value="SD">South Dakota</option>
                                                    <option value="TX">Texas</option>
                                                    <option value="TN">Tennessee</option>
                                                    <option value="WI">Wisconsin</option>
                                                </optgroup>
                                                <optgroup label="Eastern Time Zone">
                                                    <option value="CT">Connecticut</option>
                                                    <option value="DE">Delaware</option>
                                                    <option value="FL">Florida</option>
                                                    <option value="GA">Georgia</option>
                                                    <option value="IN">Indiana</option>
                                                    <option value="ME">Maine</option>
                                                    <option value="MD">Maryland</option>
                                                    <option value="MA">Massachusetts</option>
                                                    <option value="MI">Michigan</option>
                                                    <option value="NH">New Hampshire</option>
                                                    <option value="NJ">New Jersey</option>
                                                    <option value="NY">New York</option>
                                                    <option value="NC">North Carolina</option>
                                                    <option value="OH">Ohio</option>
                                                    <option value="PA">Pennsylvania</option>
                                                    <option value="RI">Rhode Island</option>
                                                    <option value="SC">South Carolina</option>
                                                    <option value="VT">Vermont</option>
                                                    <option value="VA">Virginia</option>
                                                    <option value="WV">West Virginia</option>
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div>
                                    <!--begin::Action-->
                                    <div class="kt-login__actions">
                                        <button type="submit" class="btn btn-primary btn-elevate kt-login__btn-primary">Sign Up</button>
                                    </div>

                                    <!--end::Action-->
                                </form>


                            </div>
                            <!--end::Signin-->
                        </div>
                    </div>
                </div>
                <!--end::Content-->
            </div>
        </div>
    </div>


<!-- end:: Page -->
{% endblock %}

{% block ExtraJsFIles %}

    <script src="{{ asset('js/demo1/pages/login/login-1.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/demo1/pages/crud/forms/widgets/select2.js') }}" type="text/javascript"></script>

{% endblock %}