{{#
/**
 * @name top-level/automation-tabs
 * @todo Document property vars/partial
 */
#}}
<div class="grid g-cols gap-m g-rows-fix">
  <div class="g-col-12 m--order-2 m--g-col-6 l--g-col-5">
    <div class="mw-32 mx-auto mt-6 m--mw-none m--mt-0">
      <div class="">
        <button class="button-reset tab-control tab-control-mint bg-white bs-angel-soft bs-hover block w-100 ta-left px-4 py-4 pointer mb-4 body-3 fw-500 br-1 bs-solid bw-2 bc-ocean-40 m--body-4 m--py-6" data-state="active" tab-control>
          {{ automation_button_1 }}
        </button>
      </div>
      <div class="">
        <button class="button-reset tab-control tab-control-creamsicle bg-white bs-angel-soft bs-hover block w-100 ta-left px-4 py-4 pointer mb-4 body-3 fw-500 br-1 bs-solid bw-2 bc-ocean-40 m--body-4 m--py-6" data-state="inactive" tab-control>
          {{ automation_button_2 }}
        </button>
      </div>
      <div class="">
        <button class="button-reset tab-control tab-control-lavender bg-white bs-angel-soft bs-hover block w-100 ta-left px-4 py-4 pointer mb-4 body-3 fw-500 br-1 bs-solid bw-2 bc-ocean-40 m--body-4 m--py-6" data-state="inactive" tab-control>
          {{ automation_button_3 }}
        </button>
      </div>
    </div>
  </div>

  <div class="g-col-12 m--g-col-6 m--g-row-2 l--g-col-7 ta-center relative" tab-container>
    <div class="tab w-100" data-state="active" tab>
      {{ asset:automation_1 }}
      <img src="{{ url }}" alt="{{ alt }}">
      {{ /asset:automation_1 }}
    </div>
    <div class="tab w-100" data-state="inactive" tab>
      {{ asset:automation_2 }}
      <img src="{{ url }}" alt="{{ alt }}">
      {{ /asset:automation_2 }}
    </div>
    <div class="tab w-100" data-state="inactive" tab>
      {{ asset:automation_3 }}
      <img src="{{ url }}" alt="{{ alt }}">
      {{ /asset:automation_3 }}
    </div>
  </div>

  <div class="g-col-12 s--px-10 m--order-2 m--px-0 m--g-col-6 l--g-col-5">
    {{ if title=='CRM' }}
      <ul class="list m-0 p-0">
        {{ checklist_item }}
        <li class="fs-4 lh-6 slate mb-3 flex ai-flex-start l--fs-5">
          <i class="icon-s fill-mint-100 mr-5 flex-shrink-0" aria-hidden="true">{{ theme:output src="images/check.svg" }}</i>
          {{ value }}
        </li>
        {{ /checklist_item }}
      </ul>
    {{ /if }}

    {{ if title=='Automation' }}
    <div class="bs-solid bc-ocean-40 bw-2 br-2 p-5">
      <div class="lh-0">
        <img src="{{ theme:asset src='images/star.svg' }}" alt="">
        <img src="{{ theme:asset src='images/star.svg' }}" alt="">
        <img src="{{ theme:asset src='images/star.svg' }}" alt="">
        <img src="{{ theme:asset src='images/star.svg' }}" alt="">
        <img src="{{ theme:asset src='images/star.svg' }}" alt="">
      </div>
      <p class="body-3 fw-700 slate-120">
        {{ tab_testimonial_card_heading }}
      </p>
      <p class="body-3 hang-punc slate">
        &ldquo;{{ tab_testimonial_card_body }}&rdquo;
      </p>
      <div class="flex ai-center">
        {{ if testimonial_card_asset }}
        <img src="{{ testimonial_card_asset }}" alt="" class="avatar mr-5 flex-shrink-0">
        {{ else }}
        <span class="mr-1">&mdash;</span>
        {{ /if }}
        <p class="body-2 fw-600 slate">
          {{ tab_testimonial_card_cite }}
        </p>
      </div>
    </div>
    {{ /if }}
  </div>
</div>