description = "Career Mechatrends"

[staticPage]
useContent = 0
default = 0

[builderList careers]
modelClass = "Linus\Careers\Models\Career"
scope = "-"
scopeValue = "{{ :scope }}"
displayColumn = "slug"
noRecordsMessage = "No records found"
detailsPage = "-"
detailsUrlParameter = "id"
pageNumber = "{{ :page }}"
==
<?php
use System\Classes\CombineAssets;
  function onStart(){
    $css = ['assets/css/careers.css'];
    $scripts = ['assets/javascript/careers.js'];
    $this->addCss(CombineAssets::combine($css, base_path('themes/linus')));
    $this->addJs(CombineAssets::combine($scripts, base_path('themes/linus')));
  }
?>
==
{% partial 'site/head' %}
{% partial 'site/header' %}
{% component 'staticPage' %}
{variable tab="Hero" type="mediafinder" mode="image" name="heroImage" label="Image" span="full" comment="1300px X 500px"}{/variable}
{variable tab="Hero" label="Header" type="text" name="heroHeader" span="left"}{/variable}
{% partial 'hero-banner' %}
<div class="row noPM section-pad-3">
  <div class="bg-pattern"></div>
  <div class="container">
    <h3 class="block-title text-center">AVAILABLE POSITIONS</h3>
    <br>
    {% set careers = careers.records %}
    <div class="row flex-con-stretch">
      {% for career in careers %}
        {% if career.display == 1%}
            <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-12 career-base trans">
                {% spaceless %}
                    <a href = "{{ url('/career/'~career.slug) }}">
                        <div class = "career-con career-shadow flex-con">
                            <div class="col-sm-9 col-xs-9">
                                <h4 class = "policy-title">{{ career.job }}</h4>
                                <p class = "sub-label flex-con justify-start">
                                    <img src="{{'assets/svg/ico-career-user.svg'|theme}}">{{ career.job_type }}
                                </p>
                            </div>
                            <div class="col-sm-3 col-xs-3">
                                <div class="blog-arrow flex-con pull-right">
                                  <img src="{{'assets/svg/ico-career-right.svg'|theme}}">
                                </div>
                            </div>
                        </div>
                    </a>
                {% endspaceless %}
            </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
<div class="row noPM bg-block section-pad-3">
  {variable tab="Join" label="Header" type="text" name="joinHeader" span="left"}{/variable}
  {variable tab="Join" label="Teaser" type="textarea" name="joinTeaser" span="left"}{/variable}
  <div class="container text-center">
    <h5 class="block-title">WHY JOIN US?</h5>
    <h3 class="block-header">{{joinHeader}}</h3>
    <p class="p-text block-teaser">{{joinTeaser}}</p>
  </div>
</div>
<div class="row noPM bg-block">
  <div class="career-slider">
    {variable tab="Slider" label="Header" type="text" name="slideHeader" span="left"}{/variable}
    {variable tab="Slider" label="Teaser" type="textarea" name="slideTeaser" span="left"}{/variable}
    {repeater tab="Slider" label="Image Slider" name="careerSlider" prompt="Add Image"}
      {variable type="text" label="Image Label" name="carImgLbl"}{/variable}
      {variable type="mediafinder" mode="image" name="carImg" label="Image" comment="700px x 500px (landscape)"}{/variable}
      <div title="{{fields.carImgLbl}}" alt="{{fields.carImgLbl}}" class="career-slide-img bg-img" style="background-image: url({{fields.carImg|media}})"></div>
    {/repeater}
  </div>
  <ul class="mecha-arrows trans">
    <li id="prev">
      <img src="{{'assets/svg/ico-btn-arrow.svg'|theme}}" alt="" class="center-block img-responsive">
    </li>
    <li id="next">
      <img src="{{'assets/svg/ico-btn-arrow.svg'|theme}}" alt="" class="center-block img-responsive">
    </li>
  </ul>
</div>
<div class="row noPM section-pad-3 bg-block">
  <div class="container flex-con-stretch">
    <div class="col-sm-6 col-xs-12">
      <h3 class="block-header">{{slideHeader}}</h3>
    </div>
    <div class="col-sm-6 col-xs-12">
      <p class="p-text">{{slideTeaser}}</p>
    </div>
  </div>
</div>
<div class="row noPM section-pad-3 review">
  <div class="bg-pattern"></div><br>
  <h3 class="block-header text-center hr-line">Employee Reviews</h3>
  <br><br>
  <div class="review-slider">
    {repeater tab="Reviews" label="Employee Reviews" name="revSlider" prompt="Add New"}
      {variable type="text" label="Name" name="revName"}{/variable}
      {variable type="text" label="Position" name="revPosition"}{/variable}
      {variable type="textarea" label="Comment" name="revComment" size="small"}{/variable}
      {variable type="mediafinder" mode="image" name="revImg" label="Image" comment="75px x 75px"}{/variable}
      <div class="review-slide-img text-center career-shadow trans">
        <div class="rev-img-base bg-img card-shadow" style="background-image: url({{fields.revImg|media}})"></div>
        <h4 class="service-category-title">{{fields.revName}}</h4>
        <p class="review-position">{{fields.revPosition}}</p>
        <p class="p-text">{{fields.revComment}}</p>
      </div>
    {/repeater}
  </div>
  <ul class="mecha-arrows trans">
    <li id="prev">
      <img src="{{'assets/svg/ico-btn-arrow.svg'|theme}}" alt="" class="center-block img-responsive">
    </li>
    <li id="next">
      <img src="{{'assets/svg/ico-btn-arrow.svg'|theme}}" alt="" class="center-block img-responsive">
    </li>
  </ul>
  <br>
</div>
{% partial 'site/footer' %}