{% extends "base.html" %}
{% block title %}Search — LockBox{% endblock %}
{% block content %}
<div class="container-fluid py-3 px-lg-4">
  <h1 class="h4 mb-3"><i class="bi bi-search me-2"></i>Search</h1>
  <form method="get" class="row g-2 mb-4">
    <div class="col-md-6">
      <input type="text" name="q" class="form-control form-control-lg rounded-3" placeholder="File name…" value="{{ q }}">
    </div>
    <div class="col-md-3">
      <input type="text" name="type" class="form-control form-control-lg rounded-3" placeholder="Extension (e.g. pdf)" value="{{ file_type }}">
    </div>
    <div class="col-md-3">
      <button type="submit" class="btn btn-primary btn-lg w-100 rounded-3">Search</button>
    </div>
  </form>

  <div class="list-group shadow-sm rounded-3 overflow-hidden">
    {% for file in files %}
    <div class="list-group-item d-flex align-items-center gap-3 py-3">
      <i class="bi bi-file-earmark text-primary fs-4"></i>
      <div class="flex-grow-1 text-truncate">{{ file.original_name }}</div>
      <small class="text-muted me-2">{{ (file.size / 1024)|round(1) }} KB</small>
      <button class="btn btn-sm btn-outline-primary download-btn" data-uuid="{{ file.uuid }}" data-name="{{ file.original_name }}"><i class="bi bi-download"></i></button>
    </div>
    {% else %}
    <div class="list-group-item text-center text-muted py-5">No matching files</div>
    {% endfor %}
  </div>
</div>
{% endblock %}
{% block content_mobile %}{{ self.content() }}{% endblock %}