{% extends "base.htm" %}

{% block title %}NanoShare - Accesslog{% endblock %}

{% block meta %}
  <meta name="description" content="NanoShare is a lightweight self-hosted file sharing service built on Python Quart.">
  <meta name="keywords" content="NanoShare, file sharing, self-hosted, Python Quart, open source">
  <meta name="robots" content="index, follow" />
{% endblock %}

{% block content %}
  <main class="file-list">
    <section class="card" style="padding: clamp(18px, 2.6vw, 28px);">
      <h2 class="page-title">Accesslog</h2>
      <p class="subtle">See when and how others accessed your shared files. Click a filename to open your files</p>

      <div class="table-wrap" role="region" aria-label="Files table" tabindex="0">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Accessed At</th>
              <th scope="col">Filename</th>
              <th scope="col">Note (Only Visible to You)</th>
              <th scope="col">Status</th>
              <th scope="col">IP Address</th>
              <th scope="col">User Agent</th>
            </tr>
          </thead>
          <tbody>
            {% for access in access_logs %}
            <tr>
              <td><time datetime="{{ access.accessed_at }}" class="local-time"></td>
              <td class="cell--name">
                <a href="{{ url_for('side_main.serve_file', file_id=access.file_id) }}">{{ access.file_name }}</time></a>
              </td>
              <td>{{ access.file_note }}</td>
              <td><span class="badge">{{ access.status }}</span></td>
              <td>{{ access.ip_address }}</td>
              <td>{{ access.user_agent }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  </main>

  <script>
    document.addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-action="copy"]');
      if(!btn) return;
      const row = btn.closest('tr');
      const link = row?.querySelector('.cell--name a')?.href;
      if(!link) return;
      navigator.clipboard.writeText(link).then(() => {
        const original = btn.innerHTML;
        btn.innerHTML = '✅';
        setTimeout(() => btn.innerHTML = original, 1200);
      }).catch(() => {
        alert('Could not copy link.');
      });
    });

    document.querySelectorAll("time.local-time").forEach(timeEl => {
      const datetime = timeEl.getAttribute("datetime");
      if (!datetime) return;

      const date = new Date(Number.parseInt(datetime));

      timeEl.title = date.toISOString();
      timeEl.textContent = date.toLocaleString(undefined, {
        year: "numeric",
        month: "short",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: undefined,
        hour12: false,
      });
    });
  </script>
{% endblock %}