{% extends "base.html" %}
{% block title %}Install roro9stack: flash a Cardputer ADV from your browser{% endblock %}
{% block description %}{{ page.description }}{% endblock %}
{% block head %}
<script type="module" src="/vendor/esp-web-tools/install-button.js"></script>
<script src="/js/install.js" defer></script>
{% endblock %}
{% block main %}
<div class="wrap page">
  <header>
    <span class="eyebrow">Install</span>
    <h1>{{ page.title }}</h1>
    <p class="lead">{{ page.description }}</p>
  </header>

  <div class="flasher n-lg" id="flasher" data-api="{{ config.extra.api }}" data-releases-path="/twisla/roro9stack/releases/download/">
    <h2>Install from your browser</h2>
    <p id="flasher-status" class="muted" role="status">Looking for the latest release…</p>
    <dl id="flasher-info" hidden>
      <dt>Version</dt><dd id="f-version"></dd>
      <dt>Size</dt><dd id="f-size"></dd>
      <dt>SHA-256</dt><dd id="f-sha" class="hash"></dd>
      <dt>Release</dt><dd><a class="accent-link" id="f-link" href="{{ config.extra.repo }}/releases">release notes</a></dd>
    </dl>
    <esp-web-install-button id="f-button" hidden>
      <button slot="activate" class="btn btn-primary n-md" type="button">Install roro9stack</button>
      <span slot="unsupported" class="msg">This browser can't flash a device. Use Chrome or Edge on a desktop computer, or follow the esptool steps below.</span>
      <span slot="not-allowed" class="msg">Flashing needs a secure (https) page.</span>
    </esp-web-install-button>
    <noscript><p class="msg">Flashing from this page needs JavaScript. Use the esptool steps below.</p></noscript>
  </div>

  <div class="prose">
    {{ page.content | safe }}
  </div>
</div>
{% endblock main %}