{% extends "base.htm" %}

{% block title %}NanoShare - Files{% 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">Files</h2>
      <p class="subtle">Your uploaded files at a glance. Click a filename to open, or use the actions on the right.</p>

      <div class="table-wrap" role="region" aria-label="Files table" tabindex="0">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Filename</th>
              <th scope="col">Note (Only Visible to You)</th>
              <th scope="col">Size</th>
              <th scope="col">Uploaded</th>
              <th scope="col">Expires</th>
              <th scope="col" class="cell--right">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for file in files %}
            <tr>
              <td class="cell--name">
                <a href="{{ url_for('side_main.serve_file', file_id=file.file_id) }}">{{ file.file_name }}</a>
              </td>
              <td>{{ file.note }}</td>
              <td><span class="badge">{{ file.file_size }}</span></td>
              <td><time datetime="{{ file.uploaded_at }}" class="local-time"></time></td>
              <td><time datetime="{{ file.expires_at }}" class="local-time"></time></td>
              <td class="cell--right">
                <div class="actions">
                  <button class="icon-btn" title="Info">
                    <a href="{{ url_for('side_main.file_info', file_id=file.file_id) }}">ℹ️ <span class="sr-only">Info</span></a>
                  </button>
                  <button class="icon-btn" title="Edit">
                    <a href="{{ url_for('side_main.file_edit', file_id=file.file_id) }}">✏️ <span class="sr-only">Edit</span></a>
                  </button>
                  <button class="icon-btn" title="Copy link" data-action="copy">📋 <span class="sr-only">Copy</span></button>
                </div>
              </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 %}