<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="event_track_proposal">
    <t t-call="website_event.layout">
        <div class="oe_structure" id="oe_structure_website_event_track_proposal_1"/>
        <div class="container">
            <section class="pt48">
                <h1 class="o_page_header">Call for Proposals</h1>
                <h2 class="text-center text-secondary font-weight-bold my-4" t-esc="event.name"/>
            </section>
            <section id="forms" t-if="not event.website_track_proposal">
                <h1>Proposals are closed!</h1>
                <p>
                    This event does not accept proposals.
                </p>
            </section>
            <section class="row mb32">
                <div class="oe_structure col-lg-12">
                    <section>
                        <h3 class="o_page_header mt8">
                            Introduction
                        </h3>
                        <p>
                            We will accept a broad range of
                            presentations, from reports on academic and
                            commercial projects to tutorials and case
                            studies. As long as the presentation is
                            interesting and potentially useful to the
                            audience, it will be considered for
                            inclusion in the programme.
                        </p>
                    </section>
                </div>
                <div class="col-lg-9">
                    <div>
                        <section id="forms" t-if="event.website_track_proposal">
                            <form class="mt32 js_website_submit_form o_website_event_track_proposal_form" t-att-data-event-id="event.id" enctype="multipart/form-data">
                                <input name="csrf_token" type="hidden" t-att-value="request.csrf_token()"/>
                                <div id="track_intro">
                                    <h4 class="mt32"><b>Talk Intro</b></h4>
                                    <div class="form-text text-muted mb16">
                                        What is your talk about?
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="track_name" style="width: 200px" >
                                            <span class="o_wetrack_proposal_label_content">Talk Title</span>
                                            <span>*</span>
                                        </label>
                                        <div class="col-sm">
                                            <input name="track_name" type="text" class="form-control form-field" required="True"/>
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="description" style="width: 200px" >
                                            <span class="o_wetrack_proposal_label_content">Talk Introduction</span>
                                            <span>*</span>
                                        </label>
                                        <div class="col-sm">
                                            <textarea name="description" class="form-control" required="True"/>
                                        </div>
                                    </div>    
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="tags" style="width: 200px">Categories</label>
                                        <div class="col-sm o_website_event_track_proposal_form_tags">
                                            <input name="tags" type="text" class="form-control o_wetrack_select2_tags"/>
                                        </div>
                                    </div>
                                </div>
                                <div id="speaker_profile">
                                    <h4 class="mt32"><b>Speaker Profile</b></h4>
                                    <div class="form-text text-muted mb16">
                                        Who will give this talk? We will show this to attendees to showcase your talk.
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="partner_name" style="width: 200px">Name</label>
                                        <div class="col-sm"><input name="partner_name" type="text" class="form-control"/></div>
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="partner_email" style="width: 200px">Email</label>
                                        <div class="col-sm"><input name="partner_email" type="email" class="form-control" /></div>
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="partner_phone" style="width: 200px">Phone</label>
                                        <div class="col-sm"><input name="partner_phone" type="text" class="form-control"/></div>
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="image" style="width: 200px">Picture</label><br/>
                                        <div class="col-sm"><input name="image" type="file" accept="image/*" style="width: 100%"/></div>
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="partner_function" style="width: 200px">Job Title</label>
                                        <div class="col-sm"><input name="partner_function" type="text" class="form-control"/></div>
                                    </div>
                                    <div class="row form-group">
                                        <label class="col-form-label col-sm-auto" for="partner_biography" style="width: 200px" >Biography</label>
                                        <div class="col-sm"><textarea name="partner_biography" class="form-control"/></div>
                                    </div>
                                </div>
                                <t t-call="website_event_track.event_track_proposal_contact_details"/>   
                                <div class="form-group o_form_buttons">
                                    <button type="submit" class="btn btn-primary o_wetrack_proposal_submit_button">Submit Proposal</button>
                                    <span class="o_wetrack_proposal_error_section text-danger d-none ml8">
                                        <i class="fa fa-close mr4" role="img" aria-label="Error" title="Error"/>
                                        <span class="o_wetrack_proposal_error_message"/>
                                    </span>
                                </div>
                            </form>
                        </section>
                    </div>
                    <div class="oe_structure" id="oe_structure_website_event_track_proposal_2"/>
                </div>
                <div class="col-lg-3">
                    <div class="card mb-3 bg-secondary">
                        <h4 class="card-header">Talks Types</h4>
                        <div class="card-body">
                            <ul class="list-unstyled">
                                <li>
                                    <strong>Regular Talks</strong>. These are standard talks with slides,
                                    alocated in slots of 60 minutes.
                                </li><li>
                                    <strong>Lightning Talks</strong>. These are 30 minutes talks on many
                                    different topics. Most topics are accepted in lightning talks.
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card bg-secondary">
                        <h4 class="card-header">Submission Agreement</h4>
                        <div class="card-body">
                            <p>
                            We require speakers to accept an agreement in which they commit to:
                            </p>
                            <ul class="list-unstyled">
                                <li>
                                    Timely release of presentation material (slides),
                                    for publishing on our website.
                                </li><li>
                                    Allow video and audio recording of their
                                    presentation, for publishing on our website.
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="oe_structure" id="oe_structure_website_event_track_proposal_3"/>
    </t>
</template>

<template id="event_track_proposal_contact_details">
    <div id="event_track_proposal_additional_contact_section">
        <div class="form-group">
            <input name="add_contact_information" type= "checkbox" class="o_wetrack_add_contact_information_checkbox"/>
            <label class="font-weight-normal" for="add_contact_information">Contact me through a different email/phone</label>
        </div>
        <div class="o_wetrack_contact_information d-none">
            <h4><b>Contact Information</b></h4>
            <div class="form-text text-muted mb16">
                How can our team get in touch with you?
            </div> 
            <div class="row form-group">
                <label class="col-form-label col-sm-auto" style="width: 200px">
                    <span for="contact_name">Name</span>
                    <span>*</span>
                </label>
                <div class="col-sm"><input name="contact_name" type="text" class="form-control o_wetrack_contact_name_input"/></div>
            </div>
            <div class="row form-group">
                <label class="col-form-label col-sm-auto" for="contact_email" style="width: 200px" >Email</label>
                <div class="col-sm"><input name="contact_email" type="email" class="form-control o_wetrack_contact_mean o_wetrack_contact_email_input"/></div>
            </div>
            <div class="row form-group">
                <label class="col-form-label col-sm-auto" for="contact_phone" style="width: 200px" >Phone</label>
                <div class="col-sm"><input name="contact_phone" type="text" class="form-control o_wetrack_contact_mean o_wetrack_contact_phone_input"/></div>
            </div>
        </div> 
    </div>
</template>

</odoo>
