<span hx-replace-url="false">

<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>

<title>{{ data.c_name }} attempt by {{ data.u_name }}</title>

<h2>{{ data.c_name }} attempt by {{ data.u_name }}</h2>


<!-- websocket content -->
<div id="ws" class="has-tooltip" hx-ext="ws" ws-connect="live">
  <div class="tooltip">websocket: <span class="status">waiting to connect</span></div>
</div>
<script>
  htmx.createWebSocket = function(uri) {
    let url = `${document.location}/${uri}`.replace('http','ws')
    console.log('connecting to:', url)
    let ws = new WebSocket(url)
    const el = document.getElementById('ws')
    el.addEventListener('htmx:wsOpen', e=> {
      el.style.backgroundColor = 'limegreen';
      el.querySelector('.status').innerHTML='connected'; });
    el.addEventListener('htmx:wsClose', e=> {
      el.style.backgroundColor = 'tomato';
      el.querySelector('.status').innerHTML='disconnected'});
    return ws }
</script>


<div id="attempt">
  <style>
    /** flexbox with narrow progress in left column, wide test detail in right column */
    #attempt { display: flex; }
    #progress { flex: 1; max-width: 150px; }
    #test-detail { flex: 3; }
  </style>
  <!-- list progress (passed tests) -->
  <div id="progress">
    <h2>tests</h2>
    <ul hx-target="#test-detail">
    {% for p in data.progress %}
      <li><a href="/a/{{ data.code }}/t/{{ p.t_name }}">{{ p.t_name }}</a></li>
    {% endfor %}
    </ul>
  </div>

  <div>
    {% include "state.html" %}

    <div id="test-detail">
    </div>

  </div>

</div>

</span>