description = "Service Inside Page"

[builderDetails service]
modelClass = "Linus\Services\Models\Service"
identifierValue = "{{ :slug }}"
modelKeyColumn = "slug"
displayColumn = "name"
notFoundMessage = "Record not found"

[Contact]
==
<?php
use System\Classes\CombineAssets;
  function onStart(){
    $css = ['assets/css/service.css'];
    $scripts = ['assets/javascript/service.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' %}
{% set service = service.record %}
<div class="row noPM section-pad-2">
  <div class="bg-pattern"></div>
</div>
<div class="row noPM section-pad-3">
  <div class="bg-pattern"></div>
  <div class="container">
    <div class="row">
      <ul class="bread-base flex-con justify-start">
        <li>
          <a href="{{url('/')}}">
            <img src="{{'assets/svg/ico-bread-home.svg'|theme}}" alt="" class="center-block img-responsive">
          </a>
        </li>
        <li class="bread-divider">
          <img src="{{'assets/svg/ico-bread-divider.svg'|theme}}" alt="" class="center-block img-responsive">
        </li>
        <li>
          <a class="bread-text" href="{{url('/services/'~service.cat[0].slug)}}">Services</a>
        </li>
        <li class="bread-divider">
          <img src="{{'assets/svg/ico-bread-divider.svg'|theme}}" alt="" class="center-block img-responsive">
        </li>
        <li class = "published-label">
          {{service.name}}
        </li>
      </ul>
    </div>
    <div class="row section-pad-3 text-center">
      <h3 class="article-title">{{service.name}}</h3>
      <div class="p-text block-teaser">{{service.content|raw}}</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="bg-pattern"></div>
  <div class="service-slider">
    {% for img in service.serv_images %}
      <div class="service-slide-img bg-img" style="background-image: url({{img.path}})"></div>
    {% endfor %}
  </div>
  <ul class="mecha-arrows">
    <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><br>
</div>
<div class="row noPM section-pad-3 bg-block">
  <div class="container">
    <div class="block-title text-center">RELATED PROJECTS</div>
    <br>
    {% for rel in service.projects %}
    {% if loop.index <= 2 %}
      <div class="col-sm-6 col-xs-6 project-rel-base trans wow fadeIn" data-wow-delay="{{loop.index / 2}}s">
        <a href="{{url('project/'~rel.slug)}}">
          <div class="project-rel-img bg-img" style="background-image: url({{rel.proj_images[0].path}})"></div>
          <div class="project-rel-det">
            <h4 class="people-name">{{rel.name}}</h4>
            <p class="project-desc flex-con justify-start">
              <img src="{{'assets/svg/ico-service-location.svg'|theme}}">
              {{rel.location}}
            </p>
            <p class="project-desc flex-con justify-start">
              <img src="{{'assets/svg/ico-service-date.svg'|theme}}">
              {{rel.start_date|date('M Y')}} - {{rel.end_date|date('M Y')}}
            </p>
            <div class="hover-effect cl-effect-10 cl-rev">
              <a href="{{url('/project/'~rel.slug)}}" data-hover="VIEW DETAILS">
                <span class="btn-text flex-con">VIEW DETAILS
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g id="ico-btn-arrow">
                  <path id="icon/action/trending_flat_24px" d="M21.5 12L17.5 8V11H2.5V13H17.5V16L21.5 12Z" fill="white"/>
                  </g>
                  </svg>
                </span>
              </a>
            </div>
          </div>
        </a>
      </div>
    {% endif %}
    {% endfor %}
  </div>
</div>
<div class="row noPM section-pad-3">
  <div class="bg-pattern"></div>
  <div class="bg-sea-map"></div>
  <div class="container">
    <h3 class="block-header block-teaser text-center">Have a project that needs our help? <span>message us.</span></h3>
    <div class="linus-form">
      {% component 'Contact' srcSubject = service.name %}
    </div>
  </div>
</div>

{% partial 'site/footer' %}