{% extends 'layout.html' %}
{% block page_title %}Submit Application{% endblock %}
{% 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') }} 
                        {% if form.website.errors %}
                            <ul class="danger list-margin-none list-bullets-none padding-left-0 text-align-right">
                                {% for error in form.website.errors %}<li>{{ error }}</li>{% endfor %}
                            </ul>
                        {% endif %}
                        <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?') }}
                        {% if form.city_country.errors %}
                            <ul class="danger list-margin-none list-bullets-none padding-left-0 text-align-right">
                                {% for error in form.city_country.errors %}<li>{{ error }}</li>{% endfor %}
                            </ul>
                        {% endif %}
                        <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/>
                            <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') }}
                            {% if form.video_example.errors %}
                                <ul class="danger list-margin-none list-bullets-none padding-left-0 text-align-right">
                                    {% for error in form.video_example.errors %}<li>{{ error }}</li>{% endfor %}
                                </ul>
                            {% endif %}
                            <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') }}
                            {% if form.written_example.errors %}
                                <ul class="danger list-margin-none list-bullets-none padding-left-0 text-align-right">
                                    {% for error in form.written_example.errors %}<li>{{ error }}</li>{% endfor %}
                                </ul>
                            {% endif %}
                            <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. e.g: http://yourportfolio.me') }}
                        {% if form.portfolio_cv.errors %}
                            <ul class="danger list-margin-none list-bullets-none padding-left-0 text-align-right">
                                {% for error in form.portfolio_cv.errors %}<li>{{ error }}</li>{% endfor %}
                            </ul>
                        {% endif %}
                        <label class="control-label">Porftolio / Curriculum Vitae</label>
                     </div>

                    <hr/>

                     <div class="input-group input-group-lg width-full">
                        <label class="control-label">Biography or Personal Message</label>
                        {{ form.bio_message(class='form-control', id='editor1', placeholder='Tell us a bit about yourself and why you want to be a BFCT') }} 
                        {% if form.bio_message.errors %}
                            <ul class="danger list-margin-none list-bullets-none padding-left-0 text-align-right">
                                {% for error in form.bio_message.errors %}<li>{{ error }}</li>{% endfor %}
                            </ul>
                        {% endif %}
                     </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 src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.0.1/ckeditor.js"></script>
    <script type="text/javascript">
    CKEDITOR.replace( 'editor1', {
        removePlugins: 'toolbar, elementspath',
        allowedContent: 'p h1 h2 strong em; a[!href];',
    });
    </script>

{% endblock %}