{% extends "base.html" %}
{% block content %}
<section class="hero glass">
  <div>
    <p class="eyebrow">Service Detail</p>
    <h1 data-service-title>{{ service_id }}</h1>
    <p class="lede" data-service-description></p>
  </div>
</section>
<section class="grid">
  <article class="panel glass">
    <h2>Authority</h2>
    <div class="stack">
      <div>
        <p class="label">Authoritative For</p>
        <ul data-authoritative-for></ul>
      </div>
      <div>
        <p class="label">Not Authoritative For</p>
        <ul data-not-authoritative-for></ul>
      </div>
    </div>
  </article>
  <article class="panel glass">
    <h2>Environment Bindings</h2>
    <div class="stack" data-service-bindings></div>
  </article>
</section>
{% endblock %}