{% extends "base.html" %}
{% block content %} 
<div class="container">
  <h1>Lemmy {{ trans(key="apps", lang=lang) }}</h1>
  <p>{{ trans(key="choose_apps", lang=lang) }}</p>

  <div class="row">

    <div class="card col-6">
      <header class="is-center">
        <img class="app-icon" src="/images/lemmur.svg" />
        <h4>
          <a href="https://github.com/krawieck/lemmur">lemmur</a>
        </h4>

        </header>
      </header>
      <div class="is-center">
        <img class="app-banner" src="/images/lemmur_screen.webp" />
      </div>
      <br />
      <p class="is-center">{{ trans(key="lemmur_desc", lang=lang) }}</p>
      <footer class="is-center">
        <a class="button primary" href="https://f-droid.org/packages/com.krawieck.lemmur"><svg class="icon icon-f-droid"><use xlink:href="#icon-f-droid"></use></svg></a>
        <a class="button primary" href="https://play.google.com/store/apps/details?id=com.krawieck.lemmur"><svg class="icon icon-googleplay"><use xlink:href="#icon-googleplay"></use></svg></a>
        <a class="button primary" href="https://github.com/krawieck/lemmur"><svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg></a>
      </footer>
    </div>

    <div class="card col-6">
      <header class="is-center">
        <img class="app-icon" src="/images/remmel.webp" />
        <h4>
          <a href="https://github.com/uuttff8/Lemmy-iOS">remmel</a>
        </h4>

        </header>
      </header>
      <div class="is-center">
        <img class="app-banner" src="/images/remmel_screen.webp" />
      </div>
      <br />
      <p class="is-center">{{ trans(key="remmel_desc", lang=lang) }}</p>
      <footer class="is-center">
        <a class="button primary" href="https://apps.apple.com/us/app/remmel-for-lemmy/id1547988171"><svg class="icon icon-appleinc"><use xlink:href="#icon-appleinc"></use></svg></a>
        <a class="button primary" href="https://github.com/uuttff8/Lemmy-iOS"><svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg></a>
      </footer>
    </div>

  </div>

  <h1>{{ trans(key="web_apps", lang=lang) }}</h1>

  <div class="row">

    <div class="card col-6">
      <header class="is-center">
        <img class="app-icon" src="/images/lemmy.svg" />
        <h4>
          <a href="https://github.com/LemmyNet/lemmy-ui">lemmy-ui</a>
        </h4>

        </header>
      </header>
      <div class="is-center">
        <img class="app-banner" src="/images/mobile_pic.webp" />
      </div>
      <br />
      <p class="is-center">{{ trans(key="lemmy_desc", lang=lang) }}</p>
      <footer class="is-center">
        <a class="button primary" href="https://github.com/LemmyNet/lemmy-ui"><svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg></a>
      </footer>
    </div>

    <div class="card col-6">
      <header class="is-center">
        <img class="app-icon" src="/images/lemmy.svg" />
        <h4>
          <a href="https://github.com/IronOxidizer/lemmy-lite">lemmy-lite</a>
        </h4>

        </header>
      </header>
      <div class="is-center">
        <img class="app-banner" src="/images/lemmy_lite_screen.webp" />
      </div>
      <br />
      <p class="is-center">{{ trans(key="lemmy_lite_desc", lang=lang) }}</p>
      <footer class="is-center">
        <a class="button primary" href="https://github.com/IronOxidizer/lemmy-lite"><svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg></a>
      </footer>
    </div>

  </div>

  <h1>{{ trans(key="api_libraries", lang=lang) }}</h1>
  <ul>
    <li>
      <a href="https://github.com/LemmyNet/lemmy-js-client">lemmy-js-client</a> - {{ trans(key="lemmy_js_client_desc", lang=lang) }}
    </li>
    <li>
      <a href="https://github.com/krawieck/lemmy_api_client">lemmy-dart client</a> - {{ trans(key="lemmy_dart_client_desc", lang=lang) }}
    </li>
  </ul>

</div>
{% endblock content %}