{% extends "cms/base.html" %}
{% block title %}Portfolio{% endblock %}
{% block page_title %}Portfolio{% endblock %}

{% block extra_head %}
<style>
  .cs-dot { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0; }
  .cs-dot.excellent { background:#2e9e5b; }
  .cs-dot.good      { background:#e0a72e; }
  .cs-dot.poor      { background:#d9534f; }
  .search-inline { display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem 1.25rem;transition:all .15s; }
  .search-inline:focus-within { border-color:#033152; }
  .search-inline input { border:none;background:none;outline:none;font-size:.875rem;width:160px;color:var(--cms-text); }
  .search-inline button { background:none;border:none;padding:0;color:#94a3b8;cursor:pointer;line-height:1; }
  .search-inline button:hover { color:var(--cms-accent); }
  /* col1=#, col2=Image (center), col3=Project (left) */
  .cms-table th:nth-child(3), .cms-table td:nth-child(3) { text-align: left; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>Portfolio {% if items %}<span style="font-size:.75em;font-weight:400;color:var(--cms-muted);">({{ items|length }})</span>{% endif %}</h2>
  <div class="d-flex align-items-center gap-2">
    <form method="get" class="search-inline">
      {% if cat_f %}<input type="hidden" name="cat" value="{{ cat_f }}">{% endif %}
      <i class="fa-solid fa-magnifying-glass" style="font-size:.75rem;color:#94a3b8;"></i>
      <input type="text" name="q" value="{{ q }}" placeholder="Search projects...">
      {% if q %}<a href="{% url 'cms_portfolio' %}{% if cat_f %}?cat={{ cat_f }}{% endif %}" style="color:#94a3b8;text-decoration:none;font-size:.75rem;">✕</a>{% endif %}
    </form>
    <a href="{% url 'cms_portfolio_category_add' %}" class="btn-cms-ghost"><i class="fa-solid fa-folder-plus me-1"></i>Add Category</a>
    <a href="{% url 'cms_portfolio_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Project</a>
  </div>
</div>

{% if categories %}
<div class="cms-card mb-3">
  <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem">Filter by Category</div>
  <div class="d-flex flex-wrap gap-2">
    <a href="{% url 'cms_portfolio' %}{% if q %}?q={{ q }}{% endif %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if not cat_f %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if not cat_f %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text);">
      <span>All</span>
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent);">{{ total }}</span>
    </a>
    {% for cat in categories %}
    <div style="display:flex;align-items:center;gap:.4rem;background:{% if cat_f == cat.pk|stringformat:'s' %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if cat_f == cat.pk|stringformat:'s' %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;">
      <a href="?cat={{ cat.pk }}{% if q %}&q={{ q }}{% endif %}" style="text-decoration:none;color:var(--cms-text);display:flex;align-items:center;gap:.4rem;">
        <span>{{ cat.name }}</span>
        <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent);">{{ cat.item_count }}</span>
      </a>
      <a href="{% url 'cms_portfolio_category_edit' cat.pk %}" style="color:var(--cms-accent);line-height:1"><i class="fa-solid fa-pen" style="font-size:.7rem"></i></a>
      <form method="post" action="{% url 'cms_portfolio_category_delete' cat.pk %}" style="display:inline;margin:0" onsubmit="return confirm('Delete category?')">{% csrf_token %}<button type="submit" style="background:none;border:none;padding:0;color:#e53e3e;cursor:pointer;line-height:1"><i class="fa-solid fa-xmark" style="font-size:.7rem"></i></button></form>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<div class="cms-card">
  {% if items %}
  {% if q %}<p style="font-size:.78rem;color:var(--cms-muted);margin-bottom:.75rem;">{{ items|length }} result{{ items|length|pluralize }} for "{{ q }}"</p>{% endif %}
  <table class="cms-table">
    <thead>
      <tr>
        <th style="width:36px;">#</th>
        <th style="width:70px;">Image</th>
        <th>Project</th>
        <th>Category</th>
        <th>Status</th>
        <th style="width:56px;">SEO</th>
        <th style="width:56px;">Page</th>
        <th style="width:56px;">Views</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr {% if not item.is_active %}style="opacity:.45;"{% endif %}>
        <td style="color:var(--cms-muted);font-size:.78rem;font-weight:600;">{{ forloop.counter }}</td>
        <td>{% if item.thumbnail %}<img src="{{ item.thumbnail.url }}" style="height:40px;width:60px;object-fit:cover;border-radius:4px">{% else %}<span style="font-size:.7rem;color:var(--cms-muted);">No image</span>{% endif %}</td>
        <td>
          <div style="font-weight:500;">{{ item.title }}</div>
        </td>
        <td>{% if item.category %}<span style="background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#16517b">{{ item.category }}</span>{% else %}<span style="color:var(--cms-muted);font-size:.8rem">—</span>{% endif %}</td>
        <td>{% if item.is_active %}<span class="badge-resolved">Active</span>{% else %}<span class="badge-closed">Inactive</span>{% endif %}</td>
        {% with s=item.compute_case_score %}
        <td>
          <div class="cs-dot {% if s >= 85 %}excellent{% elif s >= 60 %}good{% else %}poor{% endif %}"
               title="{{ s }}% — {% if s >= 85 %}Complete{% elif s >= 60 %}Good, room to improve{% else %}Incomplete{% endif %}">{{ s }}</div>
        </td>
        {% endwith %}
        <td style="text-align:center;">
          {% if item.slug %}<a href="{% url 'portfolio_detail' item.slug %}" target="_blank" class="btn-cms-ghost" style="padding:.3rem .6rem;font-size:.8rem;" title="Open the brand page"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>{% else %}<span style="color:var(--cms-muted);">-</span>{% endif %}
        </td>
        <td>
          <div class="cs-dot" style="background:#e2e8f0;color:#64748b;font-size:.72rem;" title="{{ item.view_count }} views">{{ item.view_count }}</div>
        </td>
        <td>
          <a href="{% url 'cms_portfolio_toggle_home' item.pk %}"
             class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;{% if item.show_on_home %}color:#16a34a;{% else %}color:#94a3b8;{% endif %}"
             title="{% if item.show_on_home %}Remove from Home{% else %}Show on Home{% endif %}">
            <i class="fa-solid fa-house"></i>
          </a>
          <a href="{% url 'cms_portfolio_toggle_visibility' item.pk %}"
             class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e;"
             title="{% if item.is_active %}Hide from site{% else %}Show on site{% endif %}">
            <i class="fa-solid {% if item.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
          </a>
          <a href="{% url 'cms_portfolio_edit' item.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem"><i class="fa-solid fa-pen"></i></a>
          <form method="post" action="{% url 'cms_portfolio_delete' item.pk %}" style="display:inline" onsubmit="return confirm('Delete?')">{% csrf_token %}<button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem"><i class="fa-solid fa-trash"></i></button></form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% include 'cms/partials/pagination.html' %}
  {% else %}
  <p style="color:var(--cms-muted);text-align:center;padding:2rem 0">{% if q %}No projects match "{{ q }}".{% else %}No portfolio items yet. <a href="{% url 'cms_portfolio_add' %}">Add one.</a>{% endif %}</p>
  {% endif %}
</div>
{% endblock %}