@using OurUmbraco.Our.Controllers
@inherits UmbracoViewPage<OurUmbraco.Our.Models.RegisterModel>
@{
    Html.EnableClientValidation(true);
    Html.EnableUnobtrusiveJavaScript(true);
}

<div class="profile-settings">
    <p>We just need some basic information from you:</p>
    <div id="registrationForm" class="profile-settings-forms">

        @using (Html.BeginUmbracoForm<RegisterController>("HandleSubmit"))
        {
            @Html.ValidationSummary(true)
            @Html.AntiForgeryToken()

            <div class="profile-input" id="username">
                @Html.LabelFor(m => m.Name)
                @Html.ValidationMessageFor(m => m.Name)
                @Html.TextBoxFor(m => m.Name)
            </div>


            <div class="profile-input" id="email">
                @Html.LabelFor(m => m.Email)
                @Html.ValidationMessageFor(m => m.Email)
                @Html.TextBoxFor(m => m.Email)
            </div>


            <div class="profile-input" id="password">
                @Html.LabelFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
                @Html.PasswordFor(m => m.Password, new { @class = "password-input" })
            </div>

            <div class="profile-input" id="twitter-alias">
                @Html.LabelFor(m => m.TwitterAlias)
                <em>Are you on Twitter? We have an active Twitter community. Follow the <a href="https://twitter.com/search?f=tweets&vertical=default&q=umbraco&src=typd" target="_blank">umbraco search term</a> and join the conversation.</em>
                @Html.TextBoxFor(m => m.TwitterAlias)
            </div>

            <div class="profile-input" id="located-at">
                @Html.LabelFor(m => m.Location)
                <em>When your location is displayed correctly on the map below, enough information has been provided.</em>
                @Html.ValidationMessageFor(m => m.Location)
                @Html.HiddenFor(m => m.Location)
                @Html.HiddenFor(m => m.Latitude)
                @Html.HiddenFor(m => m.Longitude)
                <div id="map"></div>
                <input id="pac-input" class="controls" type="text" placeholder="Search for your location">
            </div>

            <div class="profile-input" id="personal">
                @Html.HiddenFor(m => m.Flickr)
                @Html.HiddenFor(m => m.Bio)
            </div>

            <div class="profile-input" id="terms-conditions">
                @Html.CheckBoxFor(m => m.AgreeTerms) <label for="AgreeTerms"><em>I agree to the <a href="/terms-and-conditions" target="_blank">terms and conditions</a> of using the Our Umbraco website.</em></label>
                @Html.ValidationMessageFor(m => m.AgreeTerms)
            </div>

            <input class="button green" type="submit" value="Sign up">
        }
    </div>
</div>

<script type="text/javascript" src="/scripts/register.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASbfPWsRxZgSnmH2jaQlrWNE7VTV5QuwI&libraries=places&callback=initAutocomplete"></script>
<link rel="stylesheet" type="text/css" href="/css/register.css" />