{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="pagehead">
  <div><h1>{{ title }}</h1>
    <p><b>Save these now.</b> Passwords are stored scrambled and cannot be shown again (you can always reset one).</p></div>
  <div class="row no-print">
    <button class="btn" type="button" id="dl">Download CSV</button>
    <button class="btn" type="button" onclick="window.print()">Print</button>
    <a class="btn primary" href="{{ url_for('admin_users') }}">Done</a>
  </div>
</div>
<div class="card">
  <div class="tablewrap"><table class="cred-table" id="cred">
    <thead><tr><th>Name</th><th>Class</th><th>Login ID</th><th>Password</th></tr></thead>
    <tbody>
    {% for r in rows %}
      <tr><td style="font-family:inherit">{{ r.name }}</td><td style="font-family:inherit">{{ r.cls or '-' }}</td><td><b>{{ r.username }}</b></td><td>{{ r.password }}</td></tr>
    {% endfor %}
    </tbody>
  </table></div>
</div>
{% endblock %}
{% block scripts %}
<script>
  document.getElementById('dl').addEventListener('click', () => {
    const rows = [['Name','Class','Login ID','Password']];
    document.querySelectorAll('#cred tbody tr').forEach(tr => rows.push([...tr.children].map(td => td.textContent.trim())));
    const csv = rows.map(r => r.map(v => '"' + v.replace(/"/g, '""') + '"').join(',')).join('\r\n');
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob(['' + csv], {type: 'text/csv'}));
    a.download = 'rexxhub-credentials.csv';
    a.click();
  });
</script>
{% endblock %}