{% extends "layouts/settings.html" %}
{% load static %}

{% block title %}Shared Library{% endblock %}

{% block extra_head %}
<style>
  .ml-asset-card {
    background: var(--surface-0, #FFF);
    border: 1px solid var(--border, var(--color-stone-200));
    border-radius: var(--radius-xl, 0.75rem);
    transition: all var(--dur-base, 200ms) var(--ease-out, ease);
  }
  .ml-asset-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: transparent;
    transform: translateY(-2px);
  }
  .ml-filter-pill {
    font-size: 0.75rem; font-weight: 600; padding: 5px 12px;
    border-radius: 9999px; border: 1px solid var(--border, var(--color-stone-200));
    background: var(--surface-0, #FFF); color: var(--text-secondary, var(--color-stone-600));
    cursor: pointer; transition: all 150ms ease;
  }
  .ml-filter-pill:hover { border-color: var(--border-hover); }
  .ml-filter-pill.active { background: var(--primary); color: var(--text-on-primary); border-color: var(--primary); }
  .ml-type-badge {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 2px 6px; border-radius: var(--radius-sm);
  }
  .ml-search-input {
    border-color: var(--border);
    transition: border-color 150ms, box-shadow 150ms;
  }
  .ml-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
  }
</style>
{% endblock %}

{% block page_title %}Shared Library{% endblock %}

{% block content %}
<div>
  <!-- Header -->
  <div class="flex items-center justify-between mb-5">
    <div>
      <p class="text-sm" style="color: var(--text-secondary);">Organization-wide assets available to all workspaces.</p>
    </div>
    {% if is_admin %}
    <label class="inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded-full hover:bg-orange-100 hover:border-orange-300 active:bg-orange-100 transition-all duration-150 cursor-pointer">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
      Upload to Shared
      <input id="shared-upload-input" type="file" multiple accept="{{ accepted_file_types }}" class="hidden">
    </label>
    {% endif %}
  </div>

  <!-- Filters -->
  <div class="flex items-center gap-3 mb-4">
    <div class="relative flex-1 max-w-sm">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style="color: var(--text-ghost);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
      <input type="search" name="q" value="{{ query }}" placeholder="Search shared assets..."
             class="ml-search-input w-full pl-9 pr-4 py-2 text-sm border rounded-lg outline-none"
             hx-get="{% url 'media_library_org:shared_index' %}"
             hx-trigger="keyup changed delay:400ms"
             hx-target="#shared-grid"
             hx-include="[name='q']">
    </div>
    <div class="flex items-center gap-1.5">
      <a href="{% url 'media_library_org:shared_index' %}" class="ml-filter-pill {% if not current_type %}active{% endif %}">All</a>
      {% for type_val, type_label in file_types %}
      <a href="{% url 'media_library_org:shared_index' %}?type={{ type_val }}" class="ml-filter-pill {% if current_type == type_val %}active{% endif %}">{{ type_label }}</a>
      {% endfor %}
    </div>
  </div>

  <!-- Grid -->
  <div id="shared-grid">
    {% include "media_library/_shared_asset_grid.html" %}
  </div>
</div>

{% if is_admin %}
<script nonce="{{ request.csp_nonce }}">
function uploadShared(files) {
  if (!files || files.length === 0) return;
  const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  const formData = new FormData();
  Array.from(files).forEach(f => formData.append('files', f));

  fetch('{% url "media_library_org:shared_upload" %}', {
    method: 'POST',
    headers: { 'X-CSRFToken': csrfToken },
    body: formData,
  }).then(() => {
    htmx.trigger('#shared-grid', 'uploadsComplete');
  });
}

document.getElementById('shared-upload-input')
  .addEventListener('change', e => uploadShared(e.target.files));
</script>
{% endif %}
{% endblock %}