{% extends "base.html" %}
{% block title %}{{ group.name }} — Fossilrepo{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'projects:group_list' %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Groups</a>
</div>

<div class="flex items-center justify-between mb-6">
  <div>
    <h1 class="text-2xl font-bold text-gray-100">{{ group.name }}</h1>
    <p class="mt-1 text-sm text-gray-400">{{ group.description|default:"No description." }}</p>
  </div>
  <div class="flex gap-3">
    {% if perms.projects.change_projectgroup %}
    <a href="{% url 'projects:group_edit' slug=group.slug %}"
       class="rounded-md bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
      Edit
    </a>
    {% endif %}
    {% if perms.projects.delete_projectgroup %}
    <a href="{% url 'projects:group_delete' slug=group.slug %}"
       class="rounded-md bg-red-600/20 px-3 py-2 text-sm font-semibold text-red-400 shadow-sm ring-1 ring-inset ring-red-600/50 hover:bg-red-600/30">
      Delete
    </a>
    {% endif %}
  </div>
</div>

<!-- Member projects -->
<div class="mb-4">
  <h2 class="text-lg font-semibold text-gray-200">Projects in this group</h2>
</div>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  {% for project in group_projects %}
  <a href="{% url 'projects:detail' slug=project.slug %}"
     class="group rounded-lg bg-gray-800 border border-gray-700 p-4 hover:border-brand/50 transition-colors">
    <div class="flex items-start justify-between">
      <h3 class="text-sm font-medium text-gray-100 group-hover:text-brand-light">{{ project.name }}</h3>
      {% if project.visibility == "public" %}
      <span class="inline-flex rounded-full bg-green-900/50 px-2 text-xs font-semibold leading-5 text-green-300">Public</span>
      {% elif project.visibility == "internal" %}
      <span class="inline-flex rounded-full bg-yellow-900/50 px-2 text-xs font-semibold leading-5 text-yellow-300">Internal</span>
      {% else %}
      <span class="inline-flex rounded-full bg-gray-700 px-2 text-xs font-semibold leading-5 text-gray-300">Private</span>
      {% endif %}
    </div>
    <p class="mt-2 text-xs text-gray-500 line-clamp-2">{{ project.description|default:"No description." }}</p>
    <div class="mt-3 text-xs text-gray-500">Created {{ project.created_at|date:"N j, Y" }}</div>
  </a>
  {% empty %}
  <div class="col-span-full rounded-lg bg-gray-800 border border-gray-700 p-8 text-center">
    <p class="text-sm text-gray-400">No projects in this group yet.</p>
    {% if perms.projects.add_project %}
    <a href="{% url 'projects:create' %}" class="mt-2 inline-block text-sm text-brand-light hover:text-brand">Create a project</a>
    {% endif %}
  </div>
  {% endfor %}
</div>

<!-- Group info -->
<div class="mt-6">
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-4 max-w-sm">
    <h3 class="text-sm font-medium text-gray-300 mb-3">About</h3>
    <dl class="space-y-2 text-sm">
      <div class="flex items-center justify-between">
        <dt class="text-gray-500">Projects</dt>
        <dd class="text-gray-300">{{ group_projects|length }}</dd>
      </div>
      <div class="flex items-center justify-between">
        <dt class="text-gray-500">Created</dt>
        <dd class="text-gray-300">{{ group.created_at|date:"Y-m-d" }}</dd>
      </div>
    </dl>
  </div>
</div>
{% endblock %}