description = "Organization Chart"

[staticPage]
useContent = 0
default = 0
==
<?php
use System\Classes\CombineAssets;
  function onStart(){
    $css = ['assets/css/about.css', 'assets/reveal/css/modal-reveal.css', 'assets/reveal/css/normalize.css'];
    $scripts = ['assets/javascript/organization.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 organization">
  <div class="bg-pattern"></div>
  <div class="container">
    <div class = "row">
      <ul class="nav-pill flex-con trans">
        <li>
          <a href="{{url('/about')}}">
            <div class = "btn-text-b">BRIEF HISTORY OF MECHATRENDS</div>
          </a>
        </li>
        <li>
          <a href="{{url('/mission-vision')}}">
            <div class = "btn-text-b">MISSION AND VISION</div>
          </a>
        </li>
        <li>
          <a href="{{url('/organization')}}">
            <div class = "btn-text-b pill-active">OUR ORGANIZATION</div>
          </a>
        </li>
         <li>
          <a href="{{url('/corporate-social-responsibility-policy')}}">
            <div class = "btn-text-b">CORPORATE SOCIAL RESPONSIBILITY POLICY</div>
          </a>
        </li>
      </ul>
    </div>
    <div class="row text-center">
      <h5 class="block-title">THE PEOPLE</h5>
      <h3 class="block-header">MANAGEMENT TEAM</h3>
    </div>
    <div class="row flex-con-stretch section-pad-3">
      {variable tab="President" name="presName" label="Name" type="text"}{/variable}
      {variable tab="President" name="presPosition" label="Position" type="text"}{/variable}
      {variable tab="President" name="presImg" label="Image" comment="300px x 200px" type="mediafinder" mode="image"}{/variable}
      {variable tab="President" name="presAch" label="Achievements" type="richeditor" size="small"}{/variable}
      {variable tab="President" name="presContent" label="Content" type="richeditor" size="huge"}{/variable}
      <div class="col-sm-1 col-xs-0"></div>
      <div class="col-sm-4 col-xs-5 pres-base-img noPR">
        <div class="pres-con-img bg-img" style="background-image: url('{{presImg|media}}')"></div>
      </div>
      <div class="col-sm-6 col-xs-7 pres-base-det card-shadow">
        <h4 class="policy-title">{{presName}}</h4>
        <p class="sub-label">{{presPosition}}</p>
        <div class="p-text">{{presAch|raw}}</div>
        <div class="modal-btn btn-anc flex-con justify-start" data-modal="#modal-pres">READ MORE
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="trending_flat_24px">
              <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="#D6312B"/>
            </g>
          </svg>
        </div>
      </div>
      <div class="col-sm-1 col-xs-0"></div>
      <div class="modal-reveal" id="modal-pres">
        <div class="flex-con-stretch">
          <div class="modal-base-img col-sm-4 col-xs-12 noPR">
            <div class="modal-con-img bg-img" style="background-image: url('{{presImg|media}}')"></div>
          </div>
          <div class="modal-base-det col-sm-8 col-xs-12">
            <div class="btn--modal-close">x</div>
            <h4 class="policy-title">{{presName}}</h4>
            <p class="sub-label">{{presPosition}}</p>
            <div class="p-text">{{presContent|raw}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row flex-con-stretch justify-center section-pad-3 vp">
      {repeater tab="VP" name="vp" label="VP"}
        {variable name="vpName" label="Name" type="text"}{/variable}
        {variable name="vpPosition" label="Position" type="text"}{/variable}
        {variable name="vpImg" label="Image" comment="300px x 300px" type="mediafinder" mode="image"}{/variable}
        {variable name="vpAch" label="Achievements" type="richeditor" size="small"}{/variable}
        {variable name="vpContent" label="Content" type="richeditor" size="huge"}{/variable}
        <div class="col-sm-4 col-xs-6 vp-base">
          <div class="vp-con">
            <div class="vp-img bg-img trans-2 modal-btn" data-modal="#modal-vp-{{loop.index}}" style="background-image: url({{fields.vpImg|media}})">
              <div class="card-overlay"></div>
              <div class="btn-text flex-con trans">READ MORE
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g id="trending_flat_24px">
                    <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="#fff"/>
                  </g>
                </svg>
              </div>
            </div>
            <div class="vp-det trans">
              <h5 class="people-name">{{fields.vpName}}</h5>
              <p class="project-desc">{{fields.vpPosition}}</p>
              <div class="people-title">{{fields.vpAch|raw}}</div>
            </div>
          </div>
        </div>
        <div class="modal-reveal" id="modal-vp-{{loop.index}}">
          <div class="flex-con-stretch">
            <div class="modal-base-img col-sm-4 col-xs-12 noPR">
              <div class="modal-con-img bg-img" style="background-image: url('{{fields.vpImg|media}}')"></div>
            </div>
            <div class="modal-base-det col-sm-8 col-xs-12">
              <div class="btn--modal-close">x</div>
              <h4 class="policy-title">{{fields.vpName}}</h4>
              <p class="sub-label">{{fields.vpPosition}}</p>
              <div class="p-text">{{fields.vpContent|raw}}</div>
            </div>
          </div>
        </div>
      {/repeater}
    </div>
    <div class="row text-center">
      <h3 class="block-header">OPERATIONS AND EXECUTIVE TEAM</h3>
      <br><br>
    </div>
    <div class="row flex-con-stretch justify-center exec">
      {repeater tab="Executives" name="exe" label="Executives"}
        {variable name="exName" label="Name" type="text"}{/variable}
        {variable name="exPosition" label="Position" type="text"}{/variable}
        {variable name="exImg" label="Image" comment="300px x 200px" type="mediafinder" mode="image"}{/variable}
        {variable name="exContent" label="Content" type="richeditor" size="huge"}{/variable}
        <div class="col-sm-3 col-xs-6 vp-base">
          <div class="vp-con">
            <div class="vp-img bg-img trans modal-btnx" data-modal="#modal-ex-{{loop.index}}" style="background-image: url({{fields.exImg|media}})">
              <div class="card-overlay"></div>
              <!--<div class="btn-text flex-con trans hidden">READ MORE
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g id="trending_flat_24px">
                    <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="#fff"/>
                  </g>
                </svg>
              </div>-->
            </div>
            <div class="vp-det trans">
              <h5 class="service-category-title">{{fields.exName}}</h5>
              <p class="published-label">{{fields.exPosition}}</p>
            </div>
          </div>
        </div>
        <div class="modal-reveal" id="modal-ex-{{loop.index}}">
          <div class="flex-con-stretch">
            <div class="modal-base-img col-sm-4 col-xs-12 noPR">
              <div class="modal-con-img bg-img" style="background-image: url('{{fields.exImg|media}}')"></div>
            </div>
            <div class="modal-base-det col-sm-8 col-xs-12">
              <div class="btn--modal-close">x</div>
              <h4 class="policy-title">{{fields.exName}}</h4>
              <p class="sub-label">{{fields.exPosition}}</p>
              <div class="p-text">{{fields.exContent|raw}}</div>
            </div>
          </div>
        </div>
      {/repeater}
    </div>
  </div>
</div>
<div class="overlay"></div>
{% partial 'site/footer' %}