{% extends 'layout.html' %}
{% block body %}
<div class="row">
    <div class="col-md-8">
        <div class="container-fluid">
            <h2>Submit your Application</h2>
            <hr/>
            <form class="form-horizontal" method="POST" action="{{url_for('apply')}}">
                <fieldset>
                    {{ form.hidden_tag() }}
                     <div class="input-group input-group-lg width-full">
                        <span class="input-group-addon"><i class="bf-network"></i></span>
                        {{ form.network_profile(class='form-control', placeholder='e.g. http://blendernetwork.org/<name-surname>') }} 
                        <label class="control-label">Blender Network Profile (optional)</label>
                     </div>

                     <div class="input-group input-group-lg width-full">
                        <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                        {{ form.website(class='form-control', placeholder='e.g. http://www.yourname.me') }} 
                        <label class="control-label">Website</label>
                     </div>

                     <div class="input-group input-group-lg width-full">
                        <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                        {{ form.city_country(class='form-control', placeholder='Where do you currently live/teach?') }}
                        <label class="control-label">City and Country</label>
                     </div>

                    <hr/>

                    <div class="row">
                        <div class="col-md-6">
                            <p class="offset-top-4">
                            Are you currently teaching at an institution?
                            </p>
                        </div>
                        <div class="col-md-6">
                         <div class="input-group input-group-lg width-full" id="is_teaching_where">
                            {{ form.institution_name(class="form-control", placeholder="University / School / Institution's name") }} 
                            <label class="control-label">School or Institution Name</label>
                         </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <p class="offset-top-4">
                            Select which skills you focus on for teaching.
                            <br/><br/>
                            <small>(hold Ctrl for multiple selections)</small>
                            </p>
                        </div>
                        <div class="col-md-6">
                         <div class="input-group input-group-lg width-full">
                            {{ form.skills(class='form-control') }} 
                            <label class="control-label">Areas of Expertise</label>
                         </div>
                        </div>
                    </div>

                    <hr/>

                    <div class="row">
                        <div class="col-md-6">
                            <p class="offset-top-4">
                            Provide a video (or a list of videos) that show your
                            talking and training skills at their best.
                            </p>
                        </div>
                        <div class="col-md-6">
                         <div class="input-group input-group-lg width-full">
                            <span class="input-group-addon"><i class="fa fa-file-video-o"></i></span>
                            {{ form.video_example(class='form-control', placeholder='URL to a Video Example') }} 
                            <label class="control-label">Video Example</label>
                         </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <p class="offset-top-4">
                            Link us a tutorial (or a list/guide) that show your
                            writing skills at their best.
                            </p>
                        </div>
                        <div class="col-md-6">
                         <div class="input-group input-group-lg width-full">
                            <span class="input-group-addon"><i class="fa fa-file-text-o"></i></span>
                            {{ form.written_example(class='form-control', placeholder='URL to a Written Example') }} 
                            <label class="control-label">Written Example</label>
                         </div>
                        </div>
                    </div>

                    <div class="col-md-12 box offset-top-2 alert-info">
                        <p><i class="fa fa-info-circle"></i>
                        <small>The language for both the written/spoken tutorial(s) is up to you, but bare in mind it might require more time for us to review if it's not among the board's native languages.</small>
                        </p>
                    </div>

                    <hr/>

                     <div class="input-group input-group-lg width-full">
                        {{ form.portfolio_cv(class='form-control', placeholder='URL of your Portfolio or CV') }} 
                        <label class="control-label">Porftolio / Curriculum Vitae</label>
                     </div>

                    <hr/>

                     <div class="input-group input-group-lg width-full">
                        {{ form.bio_message(class='form-control', placeholder='Tell us a bit about yourself and why you want to be a BFCT') }} 
                        <label class="control-label">Biography or Personal Message</label>
                     </div>

                    <hr/>

                    <button class="btn btn-default btn-success btn-squishy width-half pull-right offset-top-2" type="submit" value="Go">
                        Send Application <i class="fa fa-send"></i>
                    </button>
                </fieldset>
            </form>
            <div class="clearfix offset-top-2"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="box">
            <i class="backicon fa fa-question-circle"></i>
            <h2>What happens when I apply?</h2>
            <p>
                Once we receive your application, the Blender Foundation Certification Board
                will proceed to review it. This may take some days.
                <br/><br/>You can come back to this page and check
                the status of your application anytime.
                <br/><br/>Once your application has been reviewed, you'll receive
                an e-mail with the results, and instructions on how to proceed.
            </p>
        </div>
    </div>
</div>

{% endblock %}