{% extends 'website/base.html' %}
{% load static %}

{% block title %}{{ service.title }} — {{ company.name }}{% endblock %}
{% block meta_description %}{{ service.short }}{% endblock %}

{% block content %}
<section class="page-hero page-hero--compact">
  <div class="container page-hero__inner reveal" data-reveal>
    <p class="eyebrow"><a href="{% url 'services' %}">Services</a></p>
    <h1>{{ service.title }}</h1>
    <p class="page-hero__lede">{{ service.short }}</p>
  </div>
</section>

<section class="section">
  <div class="container detail-layout">
    <div class="detail-layout__media reveal" data-reveal>
      <img
        src="{% static service.image %}"
        alt=""
        onerror="this.parentElement.classList.add('is-empty')"
      >
      <span class="ph-label">{{ service.image }}</span>
    </div>
    <div class="detail-layout__body reveal" data-reveal>
      <h2>What's included</h2>
      <ul class="check-list">
        {% for item in service.items %}
        <li>{{ item }}</li>
        {% endfor %}
      </ul>
      <a class="btn btn--accent" href="{% url 'contact' %}?service={{ service.slug }}">Request a quote</a>
    </div>
  </div>
</section>

{% if other_services %}
<section class="section section--muted">
  <div class="container">
    <h2 class="section__title reveal" data-reveal>Other services</h2>
    <div class="pill-links reveal" data-reveal>
      {% for s in other_services %}
      <a href="{% url 'service_detail' s.slug %}">{{ s.title }}</a>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
{% endblock %}