{#-
  Landing page for the site root.

  The page text lives in docs/index.md. This template adds the hero, the page
  layout and the landing styles. home.css is linked only from this template,
  so it never loads on the regular docs pages.
-#}
{% extends "main.html" %}

{% block extrahead %}
  {{ super() }}
  <link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="{{ config.site_name | e }}">
  <meta property="og:title" content="{{ config.site_name | e }}: {{ page.meta.title | e }}">
  <meta property="og:description" content="{{ page.meta.description | e }}">
  {% if page.canonical_url %}
    <meta property="og:url" content="{{ page.canonical_url }}">
  {% endif %}
{% endblock %}

{% block container %}
  {#- Renders one X12 segment with its ID and separators highlighted. Kept on one line because the output goes into <pre>. -#}
  {% macro x12(segment) %}{% set elements = segment.rstrip("~").split("*") %}<span class="yp-x12-id">{{ elements[0] }}</span>{% for element in elements[1:] %}<span class="yp-x12-sep">*</span>{{ element }}{% endfor %}<span class="yp-x12-sep">~</span>{% endmacro %}
  <div class="md-content yp-home" data-md-component="content">
    <svg class="yp-sprite" aria-hidden="true" focusable="false">
      <symbol id="yp-yeti" viewBox="0 0 64 64">
        <path d="M32 4.3L36.9 11.9 43.2 9.9 45.6 16.3 52.7 16.8 51.7 24.2 56.6 28.2 53.8 34 58.2 40.2 51.7 43.8 51.5 50.2 45.6 51.7 43.7 59.3 36.9 56.1 32 60 27.1 56.1 20.3 59.2 18.4 51.7 12.3 50.3 12.3 43.8 6.1 40.1 10.2 34 7 28.1 12.3 24.2 11.6 17.1 18.4 16.3 20.6 9.5 27.1 11.9Z" fill="#fff" stroke="#b9c3f2" stroke-width="4.5" stroke-linejoin="round"/>
        <path d="M32 4.3L36.9 11.9 43.2 9.9 45.6 16.3 52.7 16.8 51.7 24.2 56.6 28.2 53.8 34 58.2 40.2 51.7 43.8 51.5 50.2 45.6 51.7 43.7 59.3 36.9 56.1 32 60 27.1 56.1 20.3 59.2 18.4 51.7 12.3 50.3 12.3 43.8 6.1 40.1 10.2 34 7 28.1 12.3 24.2 11.6 17.1 18.4 16.3 20.6 9.5 27.1 11.9Z" fill="#fff" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/>
        <path d="M32 22.5c5.5-4.5 16-2.8 17.2 6.3 1.2 8.8-3.6 17.7-17.2 17.7s-18.4-8.9-17.2-17.7c1.2-9.1 11.7-10.8 17.2-6.3z" fill="#c9d3ff"/>
        <path d="M21.8 26.4q3.1-2.6 6.4-.9M42.2 26.4q-3.1-2.6-6.4-.9" fill="none" stroke="#161a40" stroke-width="1.7" stroke-linecap="round"/>
        <ellipse cx="25.8" cy="31" rx="2.5" ry="3.1" fill="#161a40"/>
        <ellipse cx="38.2" cy="31" rx="2.5" ry="3.1" fill="#161a40"/>
        <circle cx="26.6" cy="29.9" r=".9" fill="#fff"/>
        <circle cx="39" cy="29.9" r=".9" fill="#fff"/>
        <path d="M29.7 35.4h4.6c0 1.5-1.1 2.3-2.3 2.3s-2.3-.8-2.3-2.3z" fill="#161a40"/>
        <path d="M24.5 39.6c4.4 3.9 10.6 3.9 15 0" fill="none" stroke="#161a40" stroke-width="2" stroke-linecap="round"/>
        <path d="M27.4 41l1.2 2.3 1.4-1.6zM36.6 41l-1.2 2.3-1.4-1.6z" fill="#fff"/>
      </symbol>
      <symbol id="yp-paw" viewBox="0 0 28 18">
        <path d="M3 15c-1.6-6 3-12.5 11-12.5S26.6 9 25 15c-.5 1.8-2.2 2.5-11 2.5S3.5 16.8 3 15z" fill="#fff" stroke="#b9c3f2" stroke-width="1.5"/>
        <path d="M9.5 17v-4M14 17.3v-4.6M18.5 17v-4" stroke="#8f9cd8" stroke-width="1.5" stroke-linecap="round"/>
      </symbol>
      <symbol id="yp-icon-arrow" viewBox="0 0 24 24">
        <path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
      </symbol>
      <symbol id="yp-icon-code" viewBox="0 0 24 24">
        <path d="M8 6 2.5 12 8 18M16 6l5.5 6L16 18" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
      </symbol>
      <symbol id="yp-icon-heart" viewBox="0 0 24 24">
        <path d="M12 20.5s-8-4.6-8-10.6A4.4 4.4 0 0 1 12 7.3a4.4 4.4 0 0 1 8 2.6c0 6-8 10.6-8 10.6z" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linejoin="round"/>
      </symbol>
    </svg>

    <section class="yp-hero" aria-labelledby="yp-hero-title">
      <div class="yp-hero__inner">
        <div class="yp-hero__copy">
          <p class="yp-eyebrow">
            <svg class="yp-eyebrow__mark" aria-hidden="true" focusable="false"><use href="#yp-yeti"/></svg>
            The YediPy manifesto
          </p>
          <h1 id="yp-hero-title" class="yp-hero__title">Healthcare technology is evolving, but not fast enough.</h1>
          <p class="yp-hero__lede">YediPy is free, open-source EDI parsing and tooling for Python.</p>
          <ul class="yp-hero__actions">
            <li>
              <a class="yp-btn yp-btn--primary" href="{{ 'getting-started/' | url }}">
                Get started
                <svg class="yp-btn__icon" aria-hidden="true" focusable="false"><use href="#yp-icon-arrow"/></svg>
              </a>
            </li>
            <li>
              <a class="yp-btn yp-btn--glass" href="https://github.com/PatrickArronLee/yedipy">
                <svg class="yp-btn__icon" aria-hidden="true" focusable="false"><use href="#yp-icon-code"/></svg>
                View on GitHub
              </a>
            </li>
            <li>
              <a class="yp-btn yp-btn--glass" href="https://github.com/PatrickArronLee/yedipy/issues">
                <svg class="yp-btn__icon" aria-hidden="true" focusable="false"><use href="#yp-icon-heart"/></svg>
                Contribute
              </a>
            </li>
          </ul>
          <ul class="yp-hero__facts">
            <li>Pre-release</li>
            <li>MIT License</li>
            <li>Python 3.11+</li>
            <li>32 X12 transaction sets</li>
          </ul>
        </div>

        <figure class="yp-demo" role="img" aria-label="Example: three segments of an X12 837 claim, then the same claim read in Python, where the total claim charge is Decimal('250').">
          <div class="yp-demo__peek" aria-hidden="true">
            <svg class="yp-demo__yeti" focusable="false"><use href="#yp-yeti"/></svg>
          </div>
          <div class="yp-demo__card" aria-hidden="true">
            <div class="yp-demo__bar">
              <span class="yp-demo__dots"><i></i><i></i><i></i></span>
              <span>claims.edi</span>
              <span class="yp-demo__tag">X12 837P</span>
            </div>
            <pre class="yp-demo__code">{{ x12("ST*837*0001*005010X222A1~") }}
{{ x12("NM1*IL*1*DOE*JANE****MI*SUB12345~") }}
{{ x12("CLM*CLAIM0001*250***11:B:1*Y*A*Y*Y~") }}</pre>
            <p class="yp-demo__divider">Python</p>
            <pre class="yp-demo__code"><span class="yp-py-comment"># tx: TS837P from parse_transaction()</span>
<span class="yp-py-prompt">&gt;&gt;&gt;</span> claim = (tx.loop_2000a[0].loop_2000b[0]
<span class="yp-py-prompt">...</span>          .loop_2300[0])
<span class="yp-py-prompt">&gt;&gt;&gt;</span> info = claim.clm_claim_information
<span class="yp-py-prompt">&gt;&gt;&gt;</span> info.total_claim_charge_amount
<span class="yp-py-out">Decimal('250')</span></pre>
          </div>
          <svg class="yp-demo__paws" viewBox="0 0 100 18" aria-hidden="true" focusable="false">
            <use href="#yp-paw" x="0" width="28" height="18"/>
            <use href="#yp-paw" x="72" width="28" height="18"/>
          </svg>
        </figure>
      </div>
    </section>

    <div class="yp-content md-typeset">
      {{ page.content }}
    </div>
  </div>
{% endblock %}

{% block footer %}
  <footer class="yp-footer">
    <div class="yp-footer__inner">
      <div class="yp-footer__brand">
        <svg class="yp-footer__mark" aria-hidden="true" focusable="false"><use href="#yp-yeti"/></svg>
        <p>
          <strong>YediPy</strong>
          Free, open-source EDI parsing and tooling for Python.
        </p>
      </div>
      <nav class="yp-footer__nav" aria-label="Footer">
        <div>
          <p class="yp-footer__heading">Documentation</p>
          <ul>
            {% for item in nav %}
              {% if item.is_page and not item.is_homepage %}
                <li><a href="{{ item.url | url }}">{{ item.title }}</a></li>
              {% endif %}
            {% endfor %}
            <li><a href="{{ 'edi-to-python.html' | url }}">EDI to Python</a></li>
          </ul>
        </div>
        <div>
          <p class="yp-footer__heading">Project</p>
          <ul>
            <li><a href="https://github.com/PatrickArronLee/yedipy">Repository</a></li>
            <li><a href="https://github.com/PatrickArronLee/yedipy/issues">Issues</a></li>
            <li><a href="https://github.com/PatrickArronLee/yedipy/pulls">Pull requests</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="yp-footer__legal">
      {% include "partials/copyright.html" %}
    </div>
  </footer>
{% endblock %}