---
layout: default
---

{% include nav.html %}

<div class="">
  <div class="container-lg px-3 jumbotron jumbotron-minitron">
    <div class="d-flex d-flex-row gutter-spacious">
      <div class="flex-column col-9">
        <h1 class="alt-h1 lh-condensed-ultra">{{ page.title }}</h1>
        <div class="text-gray-light">{{ page.description }}</div>
      </div>
      <div class="flex-column col-3 text-center">
        <a class="mt-1 mb-2 d-block btn btn-primary btn-large" href="https://github.com/apps/{{ page.slug }}/installations/new">
          {% octicon plus class:"mr-2" %}
          Add to GitHub
        </a>
        <div class="text-gray-light">
          <div class="d-inline mr-3 tooltipped tooltipped-s" aria-label="{{ page.installs }} installations">{% octicon cloud-download width:14 class:"v-align-middle" %} <span class="">{{ page.installs }}</span></div>
          <div class="d-inline mr-3 tooltipped tooltipped-s" aria-label="{{ page.stars }} stars">{% octicon star heigh:16 class:"v-align-middle" %} <span class="">{{ page.stars }}</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray-dark text-white">
  <div class="container-lg px-3 py-6">
    <div class="d-flex flex-row d-flex-row gutter-spacious">
      <div class="flex-coumn col-9">
        <div class="">
          <div class="sixteen-by-nine rounded-1 bg-white overflow-hidden">
            {% for screenshot in page.screenshots %}
              <input class="switcher-input" id="screenshot-{{ forloop.index }}" type="radio" name="switcher"{% if forloop.index == 1 %} checked{% endif %}>
              <div class="switcher-item content d-flex flex-items-center flex-justify-center p-3">
                <img src="{{ screenshot }}" style="max-width:100%; max-height:100%;">
              </div>
            {% endfor %}
          </div>
          {% if page.screenshots.size > 1 %}
          <div class="d-flex flex-items-center flex-justify-center mt-3">
            {% for screenshot in page.screenshots %}
              <label for="screenshot-{{ forloop.index }}" class="rounded-1 border border-gray-light mx-2" style="width:125px; height: 70px; background-image: url({{ screenshot }}); background-size: cover; background-position: center;">
              </label>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </div>
      <div class="flex-column col-3">
        <h4 class="mb-1 alt-h4 text-gray">Topics</h4>
        <div class="mb-3">
          {% for topic in page.topics %}
            <a class="text-white" class="text-inherit" href="#">#{{ topic }}</a>
          {% endfor %}
        </div>

        <h4 class="mb-1 alt-h4 text-gray">Used by</h4>
        <div class="mb-3">
          {% for organization in page.organizations %}
            <a href="https://github.com/{{ organization }}"><img class="avatar avatar-group-item bg-white" src="https://github.com/{{ organization }}.png" height="35" width="35"></a>
          {% endfor %}
        </div>

        <h4 class="mb-1 alt-h4 text-gray">Updated</h4>
        <p><span class="text-white">June 12, 2017</p>

        <h4 class="mb-1 alt-h4 text-gray">Repository</h4>
        <p>
          <a class="text-inherit" href="https://github.com/{{ page.repository }}">{{ page.repository }}</a>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="py-6">
  <div class="container-lg px-3">
    <div class="d-flex flex-row gutter-spacious">
      <div class="flex-coumn col-9">
        <div class="markdown-body">
          {{ content }}
        </div>
      </div>
      <div class="flex-column col-3">
      </div>
    </div>
  </div>
</div>