{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Templates{% endblock %}
{% block page_title %}Service Templates{% endblock %}
{% block page_subtitle %}Reusable blueprints for creating services (Extension A7){% endblock %}
{% block layer_indicator %}A7 Templates{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
  <span class="text-sm text-slate-500">{{ templates|length }} template{{ templates|length|pluralize }} available</span>
</div>

{% if templates %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {% for tpl in templates %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5 flex flex-col">
    <div class="flex items-start justify-between mb-3">
      <div>
        <h3 class="text-sm font-semibold text-slate-900">{{ tpl.name }}</h3>
        {% if tpl.object_type %}
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600/20 mt-1">
          {{ tpl.object_type }}
        </span>
        {% endif %}
      </div>
      <span class="text-xs font-mono text-slate-400">{{ tpl.id|truncate_id }}</span>
    </div>

    {% if tpl.description %}
    <p class="text-sm text-slate-500 mb-3">{{ tpl.description|truncatewords:20 }}</p>
    {% endif %}

    {# Schema Preview #}
    {% if tpl.schema_preview and tpl.schema_preview != "{}" %}
    <div class="mb-4 flex-1">
      <p class="text-xs font-medium text-slate-400 uppercase mb-1">Schema</p>
      <pre class="text-xs font-mono text-slate-500 bg-slate-50 rounded-lg p-3 overflow-x-auto max-h-32">{{ tpl.schema_preview }}</pre>
    </div>
    {% endif %}

    <div class="mt-auto pt-3 border-t border-slate-100 flex items-center justify-between">
      <span class="text-xs text-slate-400">{{ tpl.created_at|format_dt }}</span>
      <form method="post" action="{% url 'templates_instantiate' tpl.id %}">
        {% csrf_token %}
        <button type="submit" class="px-3 py-1.5 bg-brand-600 text-white text-xs font-medium rounded-lg hover:bg-brand-700 transition-colors">
          Use Template
        </button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
{% include "components/_empty_state.html" with title="No templates" message="No service templates have been created yet. Templates provide reusable blueprints with pre-defined schemas for fast service creation." %}
{% endif %}
{% endblock %}