{% extends 'layout.html' %}
{% block body %}
<div class="row">
    <div class="col-md-8">
        <div class="container-fluid box">
            <h2>BFCT Application</h2>
            <p>
                Please fill all the fields.
            </p>
            <hr/>
            <form class="form-horizontal" method="POST" action="{{url_for('apply')}}">
                <fieldset>
                    {{ form.hidden_tag() }}
                     <div class="input-group input-group-lg width-full">
                        {{ form.network_profile(class='form-control', placeholder='e.g. http://blendernetwork.org/<name-surname>') }} 
                        <label class="control-label">Blender Network Profile URL</label>
                     </div>

                     <div class="input-group input-group-lg width-full">
                        {{ 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">
                        {{ form.city_country(class='form-control', placeholder='Where you currently live/teach') }}
                        <label class="control-label">City and Country</label>
                     </div>

                    <hr/>

                    <div class="row">
                        <div class="col-md-6">
                         <div class="input-group input-group-lg input-checkbox width-full" id="is_teaching">
                            <div class="btn-group" data-toggle="buttons">
                              <label class="btn btn-squishy">
                                {{ form.teaching() }}
                              </label>
                            </div>
                            <label class="control-label ">Are you currently teaching at a university?</label>
                         </div>
                        </div>
                        <div class="col-md-6">
                         <div class="input-group input-group-lg width-full disabled" id="is_teaching_where">
                            {{ form.institution_name(class="form-control", placeholder="School or Institution's name") }} 
                            <label class="control-label">School or Institution Name</label>
                         </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            A set of essential skills is required to be
                        </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">
                            A video example of your teaching 
                        </div>
                        <div class="col-md-6">
                         <div class="input-group input-group-lg width-full">
                            {{ 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">
                            A video example of your teaching 
                        </div>
                        <div class="col-md-6">
                         <div class="input-group input-group-lg width-full">
                            {{ form.written_example(class='form-control', placeholder='Written Example') }} 
                            <label class="control-label">Written Example</label>
                         </div>
                        </div>
                    </div>

                     <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 %}

{% block footer_scripts %}
    <script>
        $('#is_teaching').click(function() {
            $("#is_teaching_where").toggleClass('disabled');
        });
    </script>
{% endblock %}