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

{% block titletag %}{% trans "Plan Features" %}{% endblock %}

{% block breadcrumbs %}
{% include "wagtailadmin/shared/breadcrumbs.html" with items=breadcrumb_items %}
{% endblock %}

{% block content %}
{% include "wagtailadmin/shared/header.html" with title="Plan Features" icon="link" description="Associate features with subscription plans" %}

<div class="nice-padding" style="padding-left: 50px; padding-right: 50px;">
    {% if plan %}
    <!-- Single Plan Feature Management -->
    <div class="panel">
        <h2 class="panel-title">{% trans "Features for" %} {{ plan.name }}</h2>
        <div class="panel-content">
            {% if plan_features %}
            <table class="listing">
                <thead>
                    <tr>
                        <th>{% trans "Feature" %}</th>
                        <th>{% trans "Module" %}</th>
                        <th>{% trans "Type" %}</th>
                        <th>{% trans "Included" %}</th>
                        <th>{% trans "Quota" %}</th>
                        <th>{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for plan_feature in plan_features %}
                    <tr>
                        <td><strong>{{ plan_feature.feature.name }}</strong></td>
                        <td>{{ plan_feature.feature.module.name }}</td>
                        <td>{{ plan_feature.feature.get_feature_type_display }}</td>
                        <td>
                            {% if plan_feature.is_included %}
                                <span class="status-tag included">{% trans "Yes" %}</span>
                            {% else %}
                                <span class="status-tag excluded">{% trans "No" %}</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if plan_feature.feature.feature_type == 'quota' %}
                                {{ plan_feature.effective_quota }} {{ plan_feature.feature.quota_unit }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>
                            <form method="post" style="display: inline;">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="toggle_included">
                                <input type="hidden" name="plan_feature_id" value="{{ plan_feature.id }}">
                                <button type="submit" class="button button-small">
                                    {% if plan_feature.is_included %}{% trans "Exclude" %}{% else %}{% trans "Include" %}{% endif %}
                                </button>
                            </form>
                            <form method="post" style="display: inline;">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="remove_feature">
                                <input type="hidden" name="plan_feature_id" value="{{ plan_feature.id }}">
                                <button type="submit" class="button button-small button-secondary">{% trans "Remove" %}</button>
                            </form>
                            <a href="/admin/snippets/wagtail_subscriptions/planfeature/{{ plan_feature.id }}/" class="button button-small">{% trans "Edit" %}</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="help-block">
                <p>{% trans "No features associated with this plan yet." %}</p>
            </div>
            {% endif %}
            
            <!-- Add Feature Form -->
            {% if available_features %}
            <div style="margin-top: 30px;">
                <h3>{% trans "Add Feature to Plan" %}</h3>
                <form method="post" class="form-inline">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="add_feature">
                    <input type="hidden" name="plan_id" value="{{ plan.id }}">
                    <select name="feature_id" class="form-control" required>
                        <option value="">{% trans "Select a feature..." %}</option>
                        {% for feature in available_features %}
                        <option value="{{ feature.id }}">{{ feature.module.name }} - {{ feature.name }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="button bicolor">{% trans "Add Feature" %}</button>
                </form>
            </div>
            {% endif %}
        </div>
    </div>
    
    {% else %}
    <!-- All Plans Overview -->
    <div class="row">
        <div class="col12">
            <h2>{% trans "Plan Feature Associations" %}</h2>
            
            {% if plans %}
            <div class="plans-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
                {% for plan in plans %}
                <div class="plan-card" style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
                    <h3>{{ plan.name }}</h3>
                    <p>${{ plan.price }}/{{ plan.get_billing_period_display|lower }}</p>
                    <p><strong>{% trans "Features" %}:</strong> {{ plan.plan_features.count }}</p>
                    <a href="?plan_id={{ plan.id }}" class="button">{% trans "Manage Features" %}</a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="help-block">
                <h3>{% trans "No Plans Available" %}</h3>
                <p>{% trans "Create subscription plans first before managing features." %}</p>
                <a href="/admin/snippets/wagtail_subscriptions/subscriptionplan/add/" class="button bicolor">{% trans "Create Plan" %}</a>
            </div>
            {% endif %}
            
            {% if all_plan_features %}
            <h3>{% trans "All Plan Features" %}</h3>
            <table class="listing">
                <thead>
                    <tr>
                        <th>{% trans "Plan" %}</th>
                        <th>{% trans "Feature" %}</th>
                        <th>{% trans "Module" %}</th>
                        <th>{% trans "Included" %}</th>
                        <th>{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for plan_feature in all_plan_features %}
                    <tr>
                        <td><strong>{{ plan_feature.plan.name }}</strong></td>
                        <td>{{ plan_feature.feature.name }}</td>
                        <td>{{ plan_feature.feature.module.name }}</td>
                        <td>
                            {% if plan_feature.is_included %}
                                <span class="status-tag included">{% trans "Yes" %}</span>
                            {% else %}
                                <span class="status-tag excluded">{% trans "No" %}</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="/admin/snippets/wagtail_subscriptions/planfeature/{{ plan_feature.id }}/" class="button button-small">{% trans "Edit" %}</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<style>
.status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}
.status-tag.included { background: #d4edda; color: #155724; }
.status-tag.excluded { background: #f8d7da; color: #721c24; }
.form-inline { display: flex; gap: 10px; align-items: center; }
.form-control { padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 20px;
}
.panel-title {
    background: #f8f9fa;
    padding: 16px 20px;
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid #e9ecef;
}
.panel-content { padding: 20px; }
</style>
{% endblock %}