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

<template id="index" name="Jobs">
    <t t-call="website.layout">
        <div id="wrap" class="o_website_hr_recruitment_jobs_list">
            <!-- Snippet area -->
            <div class="oe_structure" id="oe_structure_hr_recruitment_index_top"/>

            <!-- Content -->
            <div class="container oe_website_jobs">
                <!-- Topbar -->
                <section class="o_wevent_index_topbar_filters d-flex d-print-none align-items-center justify-content-lg-end flex-wrap gap-2 mt-4 mb-3">
                    <h1 class="me-auto mb-0 h4">Our Job Offers</h1>
                    <!-- Customizations -->
                    <t t-call="website_hr_recruitment.topbar_customizations"/>
                </section>
                <div class="row pb16">
                    <div class="d-none" id="jobs_grid_left"/>
                    <div class="col-lg" id="jobs_grid">
                        <div class="row flex-column">
                            <t t-if="not jobs">
                                <div class="col">
                                    <div t-if="search" class="alert alert-warning text-center" role="alert">
                                        No results found for '<span t-out="search"/>'.
                                    </div>
                                    <div class="alert alert-info text-center text-muted" groups="hr_recruitment.group_hr_recruitment_manager">
                                        Create new job pages from the <strong>+ <i>New</i></strong> top-right button.
                                    </div>
                                    <div class="col-lg-12 text-center pt24">
                                        <p class="h5 fw-light text-muted pb24">
                                            There are currently no open job opportunities,<br class="mb-2"/>
                                            but feel free to <span class="fw-bold">contact us</span> for a spontaneous application.
                                        </p>
                                        <img class="img-fluid o_we_custom_image pb24" src="/website_hr_recruitment/static/src/img/job_not_found.svg" style="width: 50% !important;" alt="Job not found"/>
                                    </div>
                                </div>
                            </t>
                            <t t-elif="search and original_search">
                                <div class="col">
                                    <div class="alert alert-info text-center" role="alert">
                                        No results found for '<span t-out="original_search"/>'. Showing results for '<span t-out="search"/>'.
                                        <t t-set="search" t-value="original_search"/>
                                    </div>
                                </div>
                            </t>
                            <div t-foreach="jobs" t-as="job" class="col-lg mb32">
                                <div t-attf-class="card #{not job.website_published and 'o_jobs_unpublished'}">
                                    <a t-attf-href="/jobs/#{ slug(job) }"
                                            t-attf-class="text-decoration-none text-reset"
                                            draggable="false">
                                        <div class="card-body p-4">
                                            <div class="mt0 d-flex justify-content-between align-items-center">
                                                <h3 t-field="job.name"/>
                                                <span t-if="not job.website_published" class="badge pagination text-bg-danger mb8">unpublished</span>
                                            </div>
                                            <h5 t-if="job.no_of_recruitment >= 1" class="text-reset">
                                                <span t-field="job.no_of_recruitment"/>
                                                <t t-if="job.no_of_recruitment == 1">
                                                    open position
                                                </t>
                                                <t t-else="">
                                                    open positions
                                                </t>
                                            </h5>
                                            <t t-set="job_desc_edition_placeholder">Insert a Job Description...</t>
                                            <div class="oe_empty text-muted mb16"
                                                 t-field="job.description"
                                                 t-att-data-editor-message="job_desc_edition_placeholder"/>
                                            <div class="o_job_infos d-flex flex-column">
                                                <span t-field="job.address_id" class="fw-light" t-options='{"widget": "contact", "fields": ["city"], "no_tag_br": True, "null_text": "Remote"}'/>
                                                <div t-if="job.department_id"
                                                        class="d-inline-flex align-items-center">
                                                    <i class="fa fa-sitemap fa-fw"/><span t-field="job.department_id" class="fw-light" t-options='{"fields": ["name"], "no_tag_br": True}'/>
                                                </div>
                                                <div t-if="job.contract_type_id"
                                                        class="d-inline-flex align-items-center">
                                                    <i class="fa fa-suitcase fa-fw" title="Employment type" role="img" aria-label="Employment type"/><span t-field="job.contract_type_id" class="fw-light"/>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Pager -->
                    <div class='navbar mb-3 w-100'>
                        <t t-call="website.pager">
                            <t t-set="classname" t-valuef="mx-auto"/>
                        </t>
                    </div>
                </div>
            </div>

            <!-- Snippet area -->
            <div class="oe_structure" id="oe_structure_hr_recruitment_index_bottom"/>
        </div>
    </t>
</template>

<!-- Job Detail -->
<template id="detail" name="Job Detail" track="1">
    <t t-call="website.layout">
        <!-- Topbar -->
        <nav class="navbar navbar-light border-top shadow-sm d-print-none">
            <div class="container">
                <div class="d-flex flex-column flex-md-row flex-md-wrap flex-lg-nowrap justify-content-between w-100">
                    <!-- Title -->
                    <span class="navbar-brand h4 my-0 me-auto">
                        <a t-attf-href="/jobs">
                            <i class="fa fa-long-arrow-left text-primary me-2"/>All Jobs
                        </a>
                    </span>
                </div>
            </div>
        </nav>
        <!-- Content -->
        <div id="wrap" class="js_hr_recruitment">
            <div itemscope="itemscope" itemtype="https://schema.org/JobPosting">
                <meta t-if="job.contract_type_id" itemprop="employmentType" t-att-content="job.contract_type_id.sudo().name"/>
                <meta t-if="job.published_date" itemprop="datePosted" t-att-content="job.published_date"/>
                <meta itemprop="title" t-att-content="job.name"/>
                <meta itemprop="directApply" content="true"/>
                <span itemprop="hiringOrganization" itemscope="itemscope" itemtype="https://schema.org/Organization">
                    <meta itemprop="name" t-att-content="job.company_id.name"/>
                    <meta itemprop="logo" t-attf-content="/logo.png?company=#{job.company_id.id}"/>
                </span>
                <span t-if="job.address_id.sudo().contact_address" itemprop="jobLocation" itemscope="itemscope" itemtype="https://schema.org/Place">
                    <meta itemprop="address" t-att-content="job.address_id.sudo().contact_address"/>
                </span>
                <t t-else="">
                    <meta itemprop="jobLocationType" content="TELECOMMUTE"/>
                    <span itemprop="applicantLocationRequirements" itemscope="itemscope" itemtype="https://schema.org/Country">
                        <meta itemprop="name" t-att-content="job.company_id.country_id.name"/>
                    </span>
                </t>
                <!-- Job name -->
                <section class="pb32">
                    <div class="container">
                        <div class="mt32">
                            <div class="row">
                                <div class="col-md-9">
                                    <h1 t-field="job.name"/>
                                    <h5 class="fw-light o_not_editable" t-field="job.address_id" t-options='{
                                        "widget": "contact",
                                        "fields": ["city"],
                                        "no_tag_br": True,
                                        "null_text": "Remote"
                                    }'/>
                                </div>
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <br/>
                                        <a role="button" t-attf-href="/jobs/apply/#{slug(job)}" class="btn btn-primary btn-lg">Apply Now!</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Job Description -->
                <div t-field="job.website_description"/>
                <div class="oe_structure">
                    <section class="o_job_bottom_bar mt24 mb48">
                        <div class="text-center">
                            <a role="button" t-attf-href="/jobs/apply/#{slug(job)}" class="btn btn-primary btn-lg">Apply Now!</a>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </t>
</template>

<!-- Apply -->
<template id="apply">
    <t t-call="website.layout">
        <t t-set="additional_title">Apply Job</t>

        <div id="wrap"  class="container">
            <nav aria-label="breadcrumb" class="mt-5">
                <ol class="breadcrumb ps-0 mb-0 pb-1">
                    <li class="breadcrumb-item"><a href="/jobs">Jobs</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <a t-attf-href="/jobs/detail/#{slug(job)}">
                            <span t-field="job.name"/>
                        </a>
                    </li>
                </ol>
            </nav>
            <h1 class="mb-4">
                Job Application Form
            </h1>
            <span class="hidden" data-for="hr_recruitment_form" t-att-data-values="{'department_id': job and job.department_id.id or '', 'job_id': job and job.id or ''}" />
            <div id="jobs_section" class="container">
                <div class="row">
                    <section id="forms" class="col-12 col-md-9 s_website_form" data-vcss="001" data-snippet="s_website_form">
                        <div class="container">
                            <form id="hr_recruitment_form" action="/website/form/" method="post"
                                enctype="multipart/form-data" class="o_mark_required row"
                                data-mark="*" data-model_name="hr.applicant"
                                data-success-mode="redirect" data-success-page="/job-thank-you"
                                hide-change-model="true">
                                <div class="s_website_form_rows row s_col_no_bgcolor">
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required s_website_form_model_required"
                                        data-type="char" data-name="Field">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment1">
                                                <span class="s_website_form_label_content">Your Name</span>
                                                <span class="s_website_form_mark"> *</span>
                                            </label>
                                            <div class="col-sm">
                                                <input id="recruitment1" type="text"
                                                    class="form-control s_website_form_input"
                                                    name="partner_name" required=""
                                                    data-fill-with="name"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required"
                                        data-type="email" data-name="Field">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment2">
                                                <span class="s_website_form_label_content">Your Email</span>
                                                <span class="s_website_form_mark"> *</span>
                                            </label>
                                            <div class="col-sm">
                                                <input id="recruitment2" type="email"
                                                    class="form-control s_website_form_input"
                                                    name="email_from" required=""
                                                    data-fill-with="email"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required"
                                        data-type="char" data-name="Field">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment3">
                                                <span class="s_website_form_label_content">Your Phone Number</span>
                                                <span class="s_website_form_mark"> *</span>
                                            </label>
                                            <div class="col-sm">
                                                <input id="recruitment3" type="tel"
                                                    class="form-control s_website_form_input"
                                                    name="partner_phone" required=""
                                                    data-fill-with="phone"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_required"
                                        data-type="char" data-name="Field">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment4">
                                                <span class="s_website_form_label_content">LinkedIn Profile</span>
                                            </label>
                                            <div class="col-sm" >
                                                <i class="fa fa-linkedin fa-2x o_linkedin_icon"></i>
                                                <input id="recruitment4" type="text"
                                                    class="form-control s_website_form_input pl64"
                                                    placeholder="e.g. https://www.linkedin.com/in/fpodoo"
                                                    style="padding-inline-start: calc(40px + 0.375rem)"
                                                    name="linkedin_profile"
                                                    data-fill-with="linkedin_profile"/>
                                                <div class="alert alert-warning mt-2 d-none" id="linkedin-message"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_custom"
                                        data-type="binary" data-name="Field">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment6">
                                                <span class="s_website_form_label_content">Resume</span>
                                            </label>
                                            <div class="col-sm">
                                                <input id="recruitment6" type="file"
                                                    class="form-control s_website_form_input o_resume_input"
                                                    name="Resume"/>
                                                <span class="text-muted small">Provide either a resume file or a linkedin profile</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_custom"
                                        data-type="text" data-name="Field">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment5">
                                                <span class="s_website_form_label_content">Short Introduction</span>
                                            </label>
                                            <div class="col-sm">
                                                <textarea id="recruitment5"
                                                    class="form-control s_website_form_input"
                                                    placeholder="Optional introduction, or any question you might have about the job…"
                                                    name="short_introduction" rows="5"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_dnone"
                                         data-type="record" data-model="hr.job">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment7">
                                                <span class="s_website_form_label_content">Job</span>
                                            </label>
                                            <div class="col-sm">
                                                <input id="recruitment7" type="hidden"
                                                    class="form-control s_website_form_input"
                                                    name="job_id"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 mb-0 py-2 s_website_form_field s_website_form_dnone"
                                         data-type="record" data-model="hr.department">
                                        <div class="row s_col_no_resize s_col_no_bgcolor">
                                            <label class="col-4 col-sm-auto s_website_form_label" style="width: 200px" for="recruitment8">
                                                <span class="s_website_form_label_content">Department</span>
                                            </label>
                                            <div class="col-sm">
                                                <input id="recruitment8" type="hidden"
                                                    class="form-control s_website_form_input"
                                                    name="department_id"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 s_website_form_submit mb64" data-name="Submit Button">
                                        <div class="alert alert-warning mt-2 d-none" id="warning-message"></div>
                                        <div style="width: 200px" class="s_website_form_label"/>
                                        <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send" id="apply-btn">I'm feeling lucky</a>
                                        <span id="s_website_form_result"></span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </section>
                    <section class="col-12 col-md-3 ps-5">
                        <a role="button" t-attf-href="/jobs/#{slug(job)}" class="btn btn-outline-primary btn-lg mb16 o_apply_description_link">
                            <i class="oi oi-arrow-left"></i> Job Description
                        </a>
                        <div t-if="job.name" class="d-flex flex-column align-items-baseline">
                            <span class="text-muted small">Job</span>
                            <h6 t-field="job.name"/>
                        </div>
                        <div class="d-flex flex-column align-items-baseline">
                            <span class="text-muted small">Location</span>
                            <h6 t-if="job.address_id" t-field="job.address_id" t-options='{
                                "widget": "contact",
                                "fields": ["city"],
                                "no_tag_br": True,
                                "no_marker": True
                            }'/>
                            <h6 t-else="">Remote</h6>
                        </div>
                        <div t-if="job.department_id" class="d-flex flex-column align-items-baseline">
                            <span class="text-muted small">Department</span>
                            <h6 t-field="job.department_id"/>
                        </div>
                        <div t-if="job.contract_type_id" class="d-flex flex-column align-items-baseline">
                            <span class="text-muted small">Employment Type</span>
                            <h6 t-field="job.contract_type_id"/>
                        </div>
                        <hr t-if="job.job_details" class="w-50 my-3"/>
                        <div t-field="job.job_details"/>
                    </section>
                </div>
            </div>
            <div class="oe_structure mt-2"/>
        </div>
    </t>
</template>

<template id="default_website_description">
    <!-- Description text and ratings -->
    <section class="pt32">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 pb32" itemprop="description">
                    <p class="lead">
                        As an employee of our company, you will <b>collaborate with each department
                        to create and deploy disruptive products.</b> Come work at a growing company
                        that offers great benefits with opportunities to moving forward and learn
                        alongside accomplished leaders. We're seeking an experienced and outstanding
                        member of staff.
                        <br/><br/>
                        This position is both <b>creative and rigorous</b> by nature you need to think
                        outside the box. We expect the candidate to be proactive and have a "get it done"
                        spirit. To be successful, you will have solid solving problem skills.
                    </p>
                </div>
                <div class="col-lg-3 offset-lg-1 pb32">
                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                        <strong class="s_rating_title">Customer Relationship</strong>
                        <div class="s_rating_icons o_not_editable">
                            <span class="s_rating_active_icons text-primary">
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                            </span>
                            <span class="s_rating_inactive_icons text-primary">
                            </span>
                        </div>
                    </div>
                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                        <strong class="s_rating_title">Personal Evolution</strong>
                        <div class="s_rating_icons o_not_editable">
                            <span class="s_rating_active_icons text-primary">
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                            </span>
                            <span class="s_rating_inactive_icons text-primary">
                            </span>
                        </div>
                    </div>
                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                        <strong class="s_rating_title">Autonomy</strong>
                        <div class="s_rating_icons o_not_editable">
                            <span class="s_rating_active_icons text-primary">
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                            </span>
                            <span class="s_rating_inactive_icons text-primary">
                                <i class="fa fa-star-o"/>
                            </span>
                        </div>
                    </div>
                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                        <strong class="s_rating_title">Administrative Work</strong>
                        <div class="s_rating_icons o_not_editable">
                            <span class="s_rating_active_icons text-primary">
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                            </span>
                            <span class="s_rating_inactive_icons text-primary">
                                <i class="fa fa-star-o"/>
                                <i class="fa fa-star-o"/>
                                <i class="fa fa-star-o"/>
                            </span>
                        </div>
                    </div>
                    <div class="s_rating pb8" data-vcss="001" data-icon="fa-star" data-snippet="s_rating">
                        <strong class="s_rating_title">Technical Expertise</strong>
                        <div class="s_rating_icons o_not_editable">
                            <span class="s_rating_active_icons text-primary">
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                                <i class="fa fa-star"/>
                            </span>
                            <span class="s_rating_inactive_icons text-primary">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Responsabilities, Must Have and Nice to have -->
    <section class="s_comparisons pt24 pb24 bg-200" data-snippet="s_comparisons">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
                    <div class="card text-bg-primary">
                        <h4 class="card-header">Responsibilities</h4>
                        <ul class="list-group list-group-flush" itemprop="responsibilities">
                            <li class="list-group-item">Lead the entire sales cycle</li>
                            <li class="list-group-item">Achieve monthly sales objectives</li>
                            <li class="list-group-item">Qualify the customer needs</li>
                            <li class="list-group-item">Negotiate and contract</li>
                            <li class="list-group-item">Master demos of our software</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
                    <div class="card text-bg-primary">
                        <h4 class="card-header">Must Have</h4>
                        <ul class="list-group list-group-flush" itemprop="skills">
                            <li class="list-group-item">Bachelor Degree or Higher</li>
                            <li class="list-group-item">Passion for software products</li>
                            <li class="list-group-item">Perfect written English</li>
                            <li class="list-group-item">Highly creative and autonomous</li>
                            <li class="list-group-item">Valid work permit for Belgium</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16" data-name="Box">
                    <div class="card text-bg-primary">
                        <h4 class="card-header">Nice to have</h4>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">Experience in writing online content</li>
                            <li class="list-group-item">Additional languages</li>
                            <li class="list-group-item">Google Adwords experience</li>
                            <li class="list-group-item">Strong analytical skills</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- What's great -->
    <section class="s_comparisons pt24 pb24" data-snippet="s_comparisons">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-sm-7 pb40">
                    <h2>What's great in the job?</h2>
                    <br/>
                    <ul class="lead">
                        <li>Great team of smart people, in a friendly and open culture</li>
                        <li>No dumb managers, no stupid tools to use, no rigid working hours</li>
                        <li>No waste of time in enterprise processes, real responsibilities and autonomy</li>
                        <li>Expand your knowledge of various business industries</li>
                        <li>Create content that will help our users on a daily basis</li>
                        <li>Real responsibilities and challenges in a fast evolving company</li>
                    </ul>
                </div>
                <div data-name="Box" class="col-sm-4 offset-sm-1 pt16 pb16">
                    <div class="card shadow text-center">
                        <h5 class="card-header o_colored_level text-bg-primary">Our Product</h5>
                        <div class="card-body p-0 pt-3">
                            <img class="img-fluid o_we_custom_image pb24" src="/website_hr_recruitment/static/src/img/job_product.svg" style="width: 75% !important;" alt="Our Product"/>
                            <p>Discover our products.</p>
                            <p><a href="/" class="btn btn-primary o_translate_inline" target="_blank"><small><b>READ</b></small></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- What we offer -->
    <section class="s_features pt64 pb64" data-name="Features" data-snippet="s_features">
        <div class="container" itemprop="employerOverview">
            <div class="col-lg-12">
                <h3>What We Offer</h3>
                <p class="lead">
                    Each employee has a chance to see the impact of his work.
                    You can make a real contribution to the success of the company.
                    <br/>
                    Several activities are often organized all over the year, such as weekly
                    sports sessions, team building events, monthly drink, and much more
                </p>
            </div>
            <div class="row">
                <div class="col-lg-3">
                    <div class="s_hr pt-4 pb32">
                        <hr class="w-100 mx-auto"/>
                    </div>
                    <i class="fa fa-gift mb-3 rounded fs-5 bg-o-color-3" role="img"/>
                    <h3 class="h5-fs">Perks</h3>
                    <p>A full-time position <br/>Attractive salary package.</p>
                </div>
                <div class="col-lg-3">
                    <div class="s_hr pt-4 pb32">
                        <hr class="w-100 mx-auto"/>
                    </div>
                    <i class="fa fa-bar-chart mb-3 rounded fs-5 bg-o-color-3" role="img"/>
                    <h3 class="h5-fs">Trainings</h3>
                    <p>12 days / year, including <br/>6 of your choice.</p>
                </div>
                <div class="col-lg-3">
                    <div class="s_hr pt-4 pb32">
                        <hr class="w-100 mx-auto"/>
                    </div>
                    <i class="fa fa-futbol-o mb-3 rounded fs-5 bg-o-color-3" role="img"/>
                    <h3 class="h5-fs">Sport Activity</h3>
                    <p>Play any sport with colleagues, <br/>the bill is covered.</p>
                </div>
                <div class="col-lg-3">
                    <div class="s_hr pt-4 pb32">
                        <hr class="w-100 mx-auto"/>
                    </div>
                    <i class="fa fa-coffee mb-3 rounded fs-5 bg-o-color-3" role="img"/>
                    <h3 class="h5-fs">Eat &amp; Drink</h3>
                    <p>Fruit, coffee and <br/>snacks provided.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- Photos -->
    <section class="o_jobs_image_gallery s_image_gallery pt24 pb24 o_grid o_spc-medium" data-vcss="001" data-columns="3" style="overflow: hidden;" data-snippet="s_images_wall" data-name="Images Wall">
        <div class="container">
            <div class="row s_nb_column_fixed">
                <div class="col-lg-8">
                    <img src="/website_hr_recruitment/static/src/img/job_image_9.jpg" class="img img-fluid d-block h-100 w-100 shadow" style="object-fit: cover;"/>
                </div>
                <div class="col-lg-4">
                    <img src="/website_hr_recruitment/static/src/img/job_image_10.jpg" class="img img-fluid d-block h-100 w-100 shadow" style="object-fit: cover;"/>
                </div>
            </div>
            <div class="row s_nb_column_fixed">
                <div class="col-lg-3">
                    <img src="/website_hr_recruitment/static/src/img/job_image_11.jpg" class="img img-fluid d-block h-100 w-100 shadow" style="object-fit: cover;"/>
                </div>
                <div class="col-lg-3">
                    <img src="/website_hr_recruitment/static/src/img/job_image_12.jpg" class="img img-fluid d-block h-100 w-100 shadow" style="object-fit: cover;"/>
                </div>
                <div class="col-lg-6">
                    <img src="/website_hr_recruitment/static/src/img/job_image_13.jpg" class="img img-fluid d-block h-100 w-100 shadow" style="object-fit: cover;"/>
                </div>
            </div>
        </div>
    </section>
</template>

<!-- Thank You -->
<record id="thankyou" model="website.page">
    <field name="url">/job-thank-you</field>
    <field name="is_published">True</field>
    <field name="website_indexed" eval="False"/>
    <field name="name">Thank you (Recruitment)</field>
    <field name="type">qweb</field>
    <field name="key">website_hr_recruitment.thankyou</field>
    <field name="arch" type="xml">
        <t name="Thank you (Recruitment)" t-name="website_hr_recruitment.thankyou">
            <t t-if="request.session.get('form_builder_model_model', '') == 'hr.applicant'">
                <t t-set="job_sudo" t-value="request.website._website_form_last_record().sudo().job_id"/>
            </t>
            <t t-call="website.layout">
                <div id="wrap">
                    <div class="oe_structure"/>
                    <div id="jobs_thankyou" class="container">
                        <div class="row pt24 pb24">
                            <div class="col pt24 pb24 text-center">
                                <h1 class="fw-bolder">Congratulations!</h1>
                                <p class="fw-light pb24">
                                    Your application has been posted successfully,<br class="mb-2"/>
                                    We usually respond within 3 days...
                                </p>
                                <img class="img-fluid o_we_custom_image" t-attf-style="width:{{ '50%' if (job_sudo and job_sudo.user_id) else '25%' }} !important;" src="/website_hr_recruitment/static/src/img/job_congratulations.svg" alt="Congratulations!"/>
                                <div class="row" id="o_recruitment_thank_cta">
                                    <div class="col-lg-12 text-center mt32 mb48">
                                        <p>
                                            <span class="h5 fw-light">In the meantime,</span><br/>
                                            <span class="h3 mt8 mb32 fw-bold">Take a look around our website:</span>
                                        </p>
                                        <a role="button" href="/" class="btn btn-primary btn-lg">Home</a><a role="button" href="/" class="btn btn-primary btn-lg ms-3">About Us</a><a role="button" href="/" class="btn btn-primary btn-lg ms-3">Products</a>
                                    </div>
                                </div>
                            </div>
                            <!-- HR Recruiter Block -->
                            <t t-if="job_sudo and job_sudo.user_id">
                                <div class="col-lg-4 align-self-center ps-4 o_cc o_cc2 rounded">
                                    <section class="s_text_block pt24" data-snippet="s_text_block" data-name="Text">
                                        <div class="container">
                                            <p class="text-center mb-0 fs-3 lead">Your <b>contact</b> information is:</p>
                                        </div>
                                    </section>
                                    <section class="s_company_team pt12" data-snippet="s_company_team" data-name="Team">
                                        <div class="container-fluid">
                                            <div class="row justify-content-center">
                                                <div class="o_jobs_hr_recruiter col-10 o_cc o_cc1 mt24 p-4 border border-primary rounded shadow">
                                                    <div class="row align-items-center">
                                                        <div class="col-lg-5 pb16 o_not_editable">
                                                            <img t-att-src="image_data_uri(job_sudo.user_id.avatar_256)" class="img-fluid" loading="lazy"/>
                                                        </div>
                                                        <div class="col-lg-7 px-1">
                                                            <h2 class="text-truncate" t-field="job_sudo.user_id.name"/>
                                                            <p class="fw-light text-truncate" t-field="job_sudo.user_id.job_title"/>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <ul class="list-unstyled mb-0">
                                                            <li t-if="job_sudo.user_id.work_phone"><i class="fa fa-phone fa-fw me-2"></i><span class="o_force_ltr" t-field="job_sudo.user_id.work_phone"/></li>
                                                            <li class="d-inline-flex align-items-baseline"><i class="fa fa-envelope fa-fw me-2"></i><span><a class="text-break" t-attf-href="mailto:#{job_sudo.user_id.email}" t-field="job_sudo.user_id.email"/></span></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                    <section class="s_text_block pt24" data-snippet="s_text_block" data-name="Text">
                                        <div class="container">
                                            <p class="lead alert px-0">
                                                I usually <strong>answer applications within 3 days</strong>.
                                                <br/><br/>
                                                The next step is either a call or a meeting in our offices.
                                                <br/><br/>
                                                Feel free to <strong>contact me if you want a faster
                                                feedback</strong> or if you don't get news from me
                                                quickly enough.
                                            </p>
                                        </div>
                                    </section>
                                </div>
                            </t>
                        </div>
                    </div>
                    <div class="oe_structure"/>
                </div>
            </t>
        </t>
    </field>
</record>

<!-- Topbar Customizations -->
<template id="topbar_customizations" name="Topbar">
    <!-- Sets -->
    <t t-set="current_country_param" t-value="'&amp;is_remote=1' if is_remote else ('&amp;country_id=%s' % country_id.id if country_id else '')"/>
    <t t-set="current_department_param" t-value="'&amp;department_id=%s' % department_id.id if department_id else '&amp;is_other_department=1' if is_other_department else ''"/>
    <t t-set="current_office_param" t-value="'' if is_remote else '&amp;office_id=%s' % office_id.id if office_id else ''"/>
    <t t-set="current_employment_type_param" t-value="'&amp;is_untyped=1' if is_untyped else ('&amp;contract_type_id=%s' % contract_type_id.id if contract_type_id else '')"/>
    <t t-set="current_industry_param"
        t-value="'&amp;industry_id=%s' % industry_id.id if industry_id else '' or '&amp;is_industry_untyped=1' if is_industry_untyped else ''"/>
    <t t-set="opt_jobs_filter_countries" t-value="is_view_active('website_hr_recruitment.job_filter_by_countries')"/>
    <t t-set="opt_jobs_filter_departments" t-value="is_view_active('website_hr_recruitment.job_filter_by_departments')"/>
    <t t-set="opt_jobs_filter_offices" t-value="is_view_active('website_hr_recruitment.job_filter_by_offices')"/>
    <t t-set="opt_jobs_filter_employment_type" t-value="is_view_active('website_hr_recruitment.job_filter_by_employment_type')"/>
    <t t-set="opt_jobs_search_bar" t-value="is_view_active('website_hr_recruitment.job_search_bar')"/>
    <t t-set="opt_jobs_filter_industry" t-value="is_view_active('website_hr_recruitment.job_filter_by_industries')"/>
    <t t-set="opt_jobs_reset_filters" t-value="is_view_active('website_hr_recruitment.job_reset_filters')"/>
    <t t-set="opt_jobs_filter_count" t-value="sum([opt_jobs_filter_countries, opt_jobs_filter_departments, opt_jobs_filter_offices, opt_jobs_filter_employment_type, opt_jobs_filter_industry])"/>
    <t t-set="opt_jobs_is_filter_applied" t-value="country_id or industry_id or office_id or department_id or contract_type_id or is_remote or is_industry_untyped or is_other_department or is_untyped"/>
    <!-- Search bar -->
    <div t-if="opt_jobs_search_bar" class="o_jobs_topbar_search_bar d-flex w-100 w-lg-25">
        <button
            t-if="opt_jobs_filter_count &gt;= 1"
            class="o_not_editable btn btn-light d-lg-none ms-2"
            data-bs-toggle="offcanvas"
            data-bs-target="#o_jobs_offcanvas"
        >
            <i class="fa fa-sliders"/>
        </button>
    </div>
    <!-- Off canvas filters on mobile-->
    <div t-if="opt_jobs_filter_count &gt;= 1" id="o_jobs_offcanvas" class="o_website_offcanvas offcanvas offcanvas-end d-lg-none p-0 overflow-visible">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Filters</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
        </div>
        <div class="offcanvas-body p-0">
            <div class="accordion accordion-flush"/>
        </div>
    </div>
</template>

<template id="job_filter_base">
    <div class="dropdown d-none d-lg-block">
        <t t-if="jobs">
            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" title="Filter by country" aria-label="Filter by country" aria-expanded="false">
                <t t-if="selected_filter" t-out="selected_filter.name"/>
                <t t-elif="is_unset_selected">
                    <t t-if="untype_label" t-out="untype_label"/>
                    <t t-else="">Unspecified <t t-out="filter_label"/></t>
                </t>
                <t t-else="">All <t t-out="filter_label"/></t>
            </button>
            <div class="dropdown-menu w-100 w-md-auto" t-att-aria-labelledby="dropdown_id">
                <t t-foreach="count_per_filter.items()" t-as="filter_item">
                    <t t-set="selection" t-value="filter_item[0]"/>
                    <t t-set="count" t-value="filter_item[1]"/>
                    <t t-if="isinstance(selection, str) and selection == 'all'">
                        <a t-attf-href="/jobs?#{all_arg}&amp;#{non_filter_params}"
                           t-attf-class="dropdown-item d-flex align-items-center justify-content-between#{'' if selected_filter or is_unset_selected else ' active'}">
                            All <t t-out="filter_label"/><span t-attf-class="badge pagination text-bg-primary ms-2" t-out="count"/>
                        </a>
                    </t>
                    <t t-elif="selection">
                        <a t-attf-href="/jobs?#{id_selected_arg}=#{selection.id}&amp;#{non_filter_params}"
                           t-attf-class="dropdown-item d-flex align-items-center justify-content-between#{' active' if selected_filter and selected_filter.id == selection.id else ''}">
                            <t t-out="selection.name"/><span t-attf-class="badge pagination text-bg-primary ms-2" t-out="count"/>
                        </a>
                    </t>
                    <t t-else="">
                        <a t-attf-href="/jobs?#{unset_arg}&amp;#{non_filter_params}"
                           t-attf-class="dropdown-item d-flex align-items-center justify-content-between#{' active' if is_unset_selected else ''}">
                            <t t-if="untype_label" t-out="untype_label"/>
                            <t t-else="">Unspecified <t t-out="filter_label"/></t>
                            <span t-attf-class="badge pagination text-bg-primary ms-2" t-out="count"/>
                        </a>
                    </t>
                </t>
            </div>
        </t>
        <t t-else="">
            <button class="btn btn-light w-100">
                <t t-if="selected_filter" t-out="selected_filter.name"/>
                <t t-elif="is_untyped">
                    <t t-if="untype_label" t-out="untype_label"/>
                    <t t-else="">Unspecified <t t-out="filter_label"/></t>
                </t>
                <t t-else="">All <t t-out="filter_label"/></t>
            </button>
        </t>
    </div>
</template>

<template id="job_filter_base_mobile">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button
                t-attf-class="accordion-button#{'' if selected_filter or is_unset_selected else ' collapsed'}"
                type="button"
                data-bs-toggle="collapse"
                t-att-aria-controls="dropdown_id"
                t-att-data-bs-target="'#' + dropdown_id"
                t-att-aria-expanded="bool(selected_filter or is_unset_selected)"
            >
                <t t-out="filter_label"/>
            </button>
        </h2>
        <div t-att-id="dropdown_id" t-attf-class="accordion-collapse collapse#{' show' if selected_filter or is_unset_selected else ''}" t-att-data-bs-parent="'#' + dropdown_id">
            <div class="accordion-body pt-0">
                <ul t-if="jobs" class="list-group list-group-flush">
                    <li t-foreach="count_per_filter.items()" t-as="filter_item" class="list-group-item px-0 border-0">
                        <t t-set="selection" t-value="filter_item[0]"/>
                        <t t-set="count" t-value="filter_item[1]"/>
                        <t t-if="isinstance(selection, str) and selection == 'all'">
                            <a t-attf-href="/jobs?#{all_arg}&amp;#{non_filter_params}"
                            class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
                                <div class="form-check flex-basis-100">
                                    <input
                                        class="form-check-input pe-none"
                                        type="radio" t-attf-name="#{id_selected_arg}_all"
                                        t-att-checked="bool(not(selected_filter or is_unset_selected))"
                                    />
                                    <label class="form-check-label" t-attf-for="#{id_selected_arg}_all">
                                        All <t t-out="filter_label"/>
                                    </label>
                                </div>
                                <span t-attf-class="badge pagination text-bg-primary ms-2" t-out="count"/>
                            </a>
                        </t>
                        <t t-elif="selection">
                            <a t-attf-href="/jobs?#{id_selected_arg}=#{selection.id}&amp;#{non_filter_params}"
                            class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
                                <div class="form-check flex-basis-100">
                                    <input
                                        class="form-check-input pe-none"
                                        type="radio" t-attf-name="#{id_selected_arg}_#{selection.id}"
                                        t-att-checked="bool(selected_filter and selected_filter.id == selection.id)"
                                    />
                                    <label class="form-check-label" t-attf-for="#{id_selected_arg}_#{selection.id}" t-out="selection.name"/>
                                </div>
                                <span t-attf-class="badge pagination text-bg-primary ms-2" t-out="count"/>
                            </a>
                        </t>
                        <t t-else="">
                            <a t-attf-href="/jobs?#{unset_arg}&amp;#{non_filter_params}"
                            class="d-flex align-items-center justify-content-between text-reset text-decoration-none">
                                <div class="form-check flex-basis-100">
                                    <input
                                        class="form-check-input pe-none"
                                        type="radio" t-attf-name="#{id_selected_arg}_unset"
                                        t-att-checked="bool(is_unset_selected)"
                                    />
                                    <label class="form-check-label" t-attf-for="#{id_selected_arg}_unset">
                                        <t t-if="untype_label" t-out="untype_label"/>
                                        <t t-else="">Unspecified <t t-out="filter_label"/></t>
                                    </label>
                                </div>
                                <span t-attf-class="badge pagination text-bg-primary ms-2" t-out="count"/>
                            </a>
                        </t>
                    </li>
                </ul>
                <ul t-else="" class="list-group list-group-flush">
                    <li class="list-group-item px-0 border-0">
                        <span class="text-muted">
                            <t t-if="selected_filter" t-out="selected_filter.name"/>
                            <t t-elif="is_untyped">
                                <t t-if="untype_label" t-out="untype_label"/>
                                <t t-else="">Unspecified <t t-out="filter_label"/></t>
                            </t>
                            <t t-else="">All <t t-out="filter_label"/></t>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<template id="job_filter_by_countries" inherit_id="website_hr_recruitment.topbar_customizations" active="False" priority="10">
    <xpath expr="//div[hasclass('o_jobs_topbar_search_bar')]" position="before">
        <t t-call="website_hr_recruitment.job_filter_base">
            <t t-set="filter_label">Countries</t>
            <t t-set="selected_filter" t-value="country_id"/>
            <t t-set="is_unset_selected" t-value="is_remote"/>
            <t t-set="id_selected_arg" t-value="'country_id'"/>
            <t t-set="all_arg" t-value="'all_countries=1'"/>
            <t t-set="unset_arg" t-value="'is_remote=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_department_param}#{current_office_param}#{current_employment_type_param}#{current_industry_param}"/>
            <t t-set="count_per_filter" t-value="count_per_country"/>
            <t t-set="dropdown_id" t-value="'countries_dropdown'"/>
        </t>
    </xpath>
    <xpath expr="//div[hasclass('accordion-flush')]" position="inside">
        <t t-call="website_hr_recruitment.job_filter_base_mobile">
            <t t-set="filter_label">Countries</t>
            <t t-set="selected_filter" t-value="country_id"/>
            <t t-set="is_unset_selected" t-value="is_remote"/>
            <t t-set="id_selected_arg" t-value="'country_id'"/>
            <t t-set="all_arg" t-value="'all_countries=1'"/>
            <t t-set="unset_arg" t-value="'is_remote=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_department_param}#{current_office_param}#{current_employment_type_param}#{current_industry_param}"/>
            <t t-set="count_per_filter" t-value="count_per_country"/>
            <t t-set="dropdown_id" t-value="'countriesDropdown'"/>
        </t>
    </xpath>
</template>

<template id="job_filter_by_industries" inherit_id="website_hr_recruitment.topbar_customizations" active="False" priority="15">
    <xpath expr="//div[hasclass('o_jobs_topbar_search_bar')]" position="before">
        <t t-call="website_hr_recruitment.job_filter_base">
            <t t-set="filter_label">Industries</t>
            <t t-set="selected_filter" t-value="industry_id"/>
            <t t-set="is_unset_selected" t-value="is_industry_untyped"/>
            <t t-set="id_selected_arg" t-value="'industry_id'"/>
            <t t-set="all_arg" t-value="'all_industries=1'"/>
            <t t-set="unset_arg" t-value="'is_industry_untyped=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_department_param}#{current_office_param}#{current_employment_type_param}#{current_country_param}"/>
            <t t-set="count_per_filter" t-value="count_per_industry"/>
            <t t-set="dropdown_id" t-value="'industriesDropdown'"/>
        </t>
    </xpath>
    <xpath expr="//div[hasclass('accordion-flush')]" position="inside">
        <t t-call="website_hr_recruitment.job_filter_base_mobile">
            <t t-set="filter_label">Industries</t>
            <t t-set="selected_filter" t-value="industry_id"/>
            <t t-set="is_unset_selected" t-value="is_industry_untyped"/>
            <t t-set="id_selected_arg" t-value="'industry_id'"/>
            <t t-set="all_arg" t-value="'all_industries=1'"/>
            <t t-set="unset_arg" t-value="'is_industry_untyped=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_department_param}#{current_office_param}#{current_employment_type_param}#{current_country_param}"/>
            <t t-set="count_per_filter" t-value="count_per_industry"/>
            <t t-set="dropdown_id" t-value="'industriesDropdown'"/>
        </t>
    </xpath>
</template>

<template id="job_filter_by_offices" inherit_id="website_hr_recruitment.topbar_customizations" active="False" priority="20">
    <xpath expr="//div[hasclass('o_jobs_topbar_search_bar')]" position="before">
        <t t-call="website_hr_recruitment.job_filter_base">
            <t t-set="filter_label">Offices</t>
            <t t-set="selected_filter" t-value="office_id"/>
            <t t-set="is_unset_selected" t-value="is_remote"/>
            <t t-set="id_selected_arg" t-value="'office_id'"/>
            <t t-set="all_arg" t-value="'all_offices=1'"/>
            <t t-set="unset_arg" t-value="'is_remote=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_department_param}#{current_employment_type_param}#{current_industry_param}#{current_country_param}"/>
            <t t-set="count_per_filter" t-value="count_per_office"/>
            <t t-set="dropdown_id" t-value="'officesDropdown'"/>
            <t t-set="untype_label">Remote</t>
        </t>
    </xpath>
    <xpath expr="//div[hasclass('accordion-flush')]" position="inside">
        <t t-call="website_hr_recruitment.job_filter_base_mobile">
            <t t-set="filter_label">Offices</t>
            <t t-set="selected_filter" t-value="office_id"/>
            <t t-set="is_unset_selected" t-value="is_remote"/>
            <t t-set="id_selected_arg" t-value="'office_id'"/>
            <t t-set="all_arg" t-value="'all_offices=1'"/>
            <t t-set="unset_arg" t-value="'is_remote=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_department_param}#{current_employment_type_param}#{current_industry_param}#{current_country_param}"/>
            <t t-set="count_per_filter" t-value="count_per_office"/>
            <t t-set="dropdown_id" t-value="'officesDropdown'"/>
            <t t-set="untype_label">Remote</t>
        </t>
    </xpath>
</template>

<template id="job_filter_by_departments" inherit_id="website_hr_recruitment.topbar_customizations" active="False" priority="30">
    <xpath expr="//div[hasclass('o_jobs_topbar_search_bar')]" position="before">
        <t t-call="website_hr_recruitment.job_filter_base">
            <t t-set="filter_label">Departments</t>
            <t t-set="selected_filter" t-value="department_id"/>
            <t t-set="is_unset_selected" t-value="is_other_department"/>
            <t t-set="id_selected_arg" t-value="'department_id'"/>
            <t t-set="all_arg" t-value="'all_departments=1'"/>
            <t t-set="unset_arg" t-value="'is_other_department=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_country_param}#{current_office_param}#{current_employment_type_param}#{current_industry_param}"/>
            <t t-set="count_per_filter" t-value="count_per_department"/>
            <t t-set="dropdown_id" t-value="'departmentsDropdown'"/>
            <t t-set="untype_label">Others</t>
        </t>
    </xpath>
    <xpath expr="//div[hasclass('accordion-flush')]" position="inside">
        <t t-call="website_hr_recruitment.job_filter_base_mobile">
            <t t-set="filter_label">Departments</t>
            <t t-set="selected_filter" t-value="department_id"/>
            <t t-set="is_unset_selected" t-value="is_other_department"/>
            <t t-set="id_selected_arg" t-value="'department_id'"/>
            <t t-set="all_arg" t-value="'all_departments=1'"/>
            <t t-set="unset_arg" t-value="'is_other_department=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_country_param}#{current_office_param}#{current_employment_type_param}#{current_industry_param}"/>
            <t t-set="count_per_filter" t-value="count_per_department"/>
            <t t-set="dropdown_id" t-value="'departmentsDropdown'"/>
            <t t-set="untype_label">Others</t>
        </t>
    </xpath>
</template>

<template id="job_filter_by_employment_type" inherit_id="website_hr_recruitment.topbar_customizations" active="False" priority="40">
    <xpath expr="//div[hasclass('o_jobs_topbar_search_bar')]" position="before">
        <t t-call="website_hr_recruitment.job_filter_base">
            <t t-set="filter_label">Types</t>
            <t t-set="selected_filter" t-value="contract_type_id"/>
            <t t-set="is_unset_selected" t-value="is_untyped"/>
            <t t-set="id_selected_arg" t-value="'contract_type_id'"/>
            <t t-set="all_arg" t-value="'all_employment_types=1'"/>
            <t t-set="unset_arg" t-value="'is_untyped=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_country_param}#{current_department_param}#{current_office_param}#{current_industry_param}"/>
            <t t-set="count_per_filter" t-value="count_per_employment_type"/>
            <t t-set="dropdown_id" t-value="'employmentDropdown'"/>
        </t>
    </xpath>
    <xpath expr="//div[hasclass('accordion-flush')]" position="inside">
        <t t-call="website_hr_recruitment.job_filter_base_mobile">
            <t t-set="filter_label">Types</t>
            <t t-set="selected_filter" t-value="contract_type_id"/>
            <t t-set="is_unset_selected" t-value="is_untyped"/>
            <t t-set="id_selected_arg" t-value="'contract_type_id'"/>
            <t t-set="all_arg" t-value="'all_employment_types=1'"/>
            <t t-set="unset_arg" t-value="'is_untyped=1'"/>
            <t t-set="non_filter_params" t-valuef="#{current_country_param}#{current_department_param}#{current_office_param}#{current_industry_param}"/>
            <t t-set="count_per_filter" t-value="count_per_employment_type"/>
            <t t-set="dropdown_id" t-value="'employmentDropdown'"/>
        </t>
    </xpath>
</template>

<!-- reset filters -->
<template id="job_reset_filters"
    inherit_id="website_hr_recruitment.topbar_customizations"
    active="False"
    priority="50">
    <xpath expr="//t[@t-set='opt_jobs_is_filter_applied']" position="after">
        <a t-if="opt_jobs_is_filter_applied and opt_jobs_filter_count &gt; 1"
            t-attf-href="/jobs#{('?search=' + search) if search else ''}"
            class="d-none d-lg-block btn btn-link"
            role="button"
            type="button">
            Reset Filters
        </a>
    </xpath>
    <xpath expr="//div[hasclass('offcanvas-body')]" position="after">
        <div class="offcanvas-footer border-top p-3">
            <a t-if="opt_jobs_is_filter_applied and opt_jobs_filter_count &gt; 1"
                t-attf-href="/jobs#{('?search=' + search) if search else ''}"
                class="d-lg-none btn btn-light w-100"
                role="button"
                type="button">
                Reset Filters
            </a>
        </div>
    </xpath>
</template>

<!-- Search Bar -->
<template id="job_search_bar" inherit_id="website_hr_recruitment.topbar_customizations" active="True">
    <xpath expr="//div[hasclass('o_jobs_topbar_search_bar')]/button" position="before">
        <t t-call="website.website_search_box_input">
            <t t-set="_form_classes" t-valuef="flex-grow-1"/>
            <t t-set="search_type" t-valuef="jobs"/>
            <t t-set="display_description" t-valuef="true"/>
            <input t-if="country_id" type="hidden" name="country_id" t-att-value="country_id.id"/>
            <input t-if="office_id" type="hidden" name="office_id" t-att-value="office_id.id"/>
            <input t-if="department_id" type="hidden" name="department_id" t-att-value="department_id.id"/>
            <input t-if="contract_type_id" type="hidden" name="contract_type_id" t-att-value="contract_type_id.id"/>
            <input t-if="is_remote" type="hidden" name="is_remote" value="1"/>
            <input t-if="is_other_department" type="hidden" name="is_other_department" value="1"/>
        </t>
    </xpath>
</template>

<!-- Right Side Bar -->
<template id="job_right_side_bar" inherit_id="website_hr_recruitment.index" active="True" name="Right Side Bar">
    <xpath expr="//div[@id='jobs_grid']" position="after">
        <div class="col-lg-4 oe_structure oe_empty" id="jobs_grid_right">
            <section class="">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 pb24">
                            <img src="/website_hr_recruitment/static/src/img/job_image_8.jpg" class="img-fluid" alt="About us"/>
                            <p class="mt24 mb8">
                                We are a team of passionate people whose goal is to improve everyone's life through disruptive products.
                                We build great products to solve your business problems.
                            </p>
                            <div class="s_hr pt16 pb16" data-snippet="s_hr" data-name="Separator">
                                <hr class="w-100 mx-auto" style="border-top-color: var(--400)  !important;"/>
                            </div>
                            <div>
                                <ul class="list-unstyled text-nowrap">
                                    <li><i class="fa fa-comment fa-fw me-2"></i><span><a href="/contactus">Contact us</a></span></li>
                                    <li><i class="fa fa-envelope fa-fw me-2"></i><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
                                    <li><i class="fa fa-phone fa-fw me-2"></i><span class="o_force_ltr"><a href="tel:+1 (650) 555-0187">+1 (650) 555-0187</a></span></li>
                                </ul>
                                <!-- Social media -->
                                <div class="s_social_media text-start" data-name="Social Media" data-snippet="s_social_media">
                                    <h5 class="s_social_media_title d-none">Follow us</h5>
                                    <a href="/website/social/facebook" class="s_social_media_facebook text-decoration-none" target="_blank" aria-label="Facebook">
                                        <i class="fa fa-facebook rounded-empty-circle btn btn-outline-primary shadow-sm"></i>
                                    </a>
                                    <a href="/website/social/twitter" class="s_social_media_twitter text-decoration-none" target="_blank" aria-label="X">
                                        <i class="fa fa-twitter rounded-empty-circle btn btn-outline-primary shadow-sm"></i>
                                    </a>
                                    <a href="/website/social/linkedin" class="s_social_media_linkedin text-decoration-none" target="_blank" aria-label="LinkedIn">
                                        <i class="fa fa-linkedin rounded-empty-circle btn btn-outline-primary shadow-sm"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </xpath>
</template>

</odoo>
