{% extends "wagtailadmin/base.html" %}
{% load i18n %}

{% block titletag %}{% trans "Features & Modules" %}{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumb">
    <a href="{% url 'wagtailadmin_home' %}">{% trans 'Home' %}</a>
    <span>{% trans 'Subscriptions' %}</span>
    <span>{% trans 'Features' %}</span>
</div>
{% endblock %}

{% block content %}
{% include "wagtailadmin/shared/header.html" with title="Features & Modules" icon="cogs" action_url="/admin/snippets/wagtail_subscriptions/module/add/" action_text="Add Module" extra_actions='<a href="/admin/snippets/wagtail_subscriptions/feature/add/" class="button bicolor icon icon-plus">Add Feature</a>' %}

<div class="nice-padding" style="padding-left: 50px; padding-right: 50px;">
    <div class="row">
        <div class="col6">
            <h2>{% trans "Modules" %}</h2>
            {% if modules %}
            <table class="listing">
                <thead>
                    <tr>
                        <th>{% trans "Name" %}</th>
                        <th>{% trans "Features" %}</th>
                        <th>{% trans "Active" %}</th>
                        <th>{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for module in modules %}
                    <tr>
                        <td><strong>{{ module.name }}</strong></td>
                        <td>{{ module.features.count }}</td>
                        <td>
                            {% if module.is_active %}
                                <span class="status-tag active">{% trans "Active" %}</span>
                            {% else %}
                                <span class="status-tag inactive">{% trans "Inactive" %}</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="/admin/snippets/wagtail_subscriptions/module/{{ module.id }}/" class="button button-small">{% trans "Edit" %}</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="help-block">
                <p>{% trans "No modules created yet." %}</p>
                <a href="/admin/snippets/wagtail_subscriptions/module/add/" class="button">{% trans "Add Module" %}</a>
            </div>
            {% endif %}
        </div>
        
        <div class="col6">
            <h2>{% trans "Features" %}</h2>
            {% if features %}
            <table class="listing">
                <thead>
                    <tr>
                        <th>{% trans "Name" %}</th>
                        <th>{% trans "Module" %}</th>
                        <th>{% trans "Type" %}</th>
                        <th>{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for feature in features %}
                    <tr>
                        <td><strong>{{ feature.name }}</strong></td>
                        <td>{{ feature.module.name }}</td>
                        <td>{{ feature.get_feature_type_display }}</td>
                        <td>
                            <a href="/admin/snippets/wagtail_subscriptions/feature/{{ feature.id }}/" class="button button-small">{% trans "Edit" %}</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="help-block">
                <p>{% trans "No features created yet." %}</p>
                <a href="/admin/snippets/wagtail_subscriptions/feature/add/" class="button">{% trans "Add Feature" %}</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
.status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}
.status-tag.active { background: #d4edda; color: #155724; }
.status-tag.inactive { background: #f8d7da; color: #721c24; }
</style>
{% endblock %}