{% extends "admin/layout.html" %}
{% block title %}Subscription Plans – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-plans">{% trans %}Subscription Plans{% endtrans %}</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}Manage pricing plans and limits. Stripe products are created automatically — no manual Stripe Dashboard setup needed.{% endtrans %}</p>
    </div>
    <div class="flex gap-2">
        {% if stripe_mode %}
        <form method="POST" action="{{ full_url('/admin/plans/sync-all-stripe') }}" class="inline" data-confirm="Sync all paid plans to Stripe ({{ stripe_mode }} mode)?&#10;&#10;• Plan prices and details will be pushed to Stripe&#10;• Existing Stripe plans/prices will be updated">
            <button type="submit" class="px-4 py-2 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 text-sm font-semibold transition-all">
                <i class="fa fa-sync mr-1"></i>Sync All to Stripe ({{ stripe_mode }})
            </button>
        </form>
        {% endif %}
        <button id="btn-create-plan" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all" data-testid="btn-add-plan">
            <i class="fa fa-plus mr-1"></i>{% trans %}New Plan{% endtrans %}
        </button>
    </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<div class="grid gap-6">
{% for plan in plans %}
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5" data-testid="card-plan-{{ plan.id }}">
    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full {% if plan.price_monthly == 0 %}bg-gray-100 dark:bg-gray-800{% elif plan.price_monthly < 15 %}bg-blue-100 dark:bg-blue-900/30{% else %}bg-yellow-100 dark:bg-yellow-900/30{% endif %} flex items-center justify-center">
                <i class="fa fa-{% if plan.price_monthly == 0 %}user{% elif plan.price_monthly < 15 %}star{% else %}crown{% endif %} text-{% if plan.price_monthly == 0 %}gray-500{% elif plan.price_monthly < 15 %}blue-500{% else %}yellow-500{% endif %}"></i>
            </div>
            <div>
                <h2 class="text-lg font-bold text-gray-900 dark:text-white" data-testid="text-plan-name-{{ plan.id }}">{{ plan.name }}</h2>
                <div class="flex items-center gap-2 mt-0.5">
                    <span class="text-sm font-semibold {% if plan.price_monthly == 0 %}text-gray-500{% else %}text-green-600 dark:text-green-400{% endif %}" data-testid="text-plan-price-{{ plan.id }}">
                        {% if plan.price_monthly == 0 %}{% trans %}Free{% endtrans %}{% else %}${{ "%.2f"|format(plan.price_monthly) }}/{% trans %}mo{% endtrans %}{% endif %}
                    </span>
                    {% if not plan.is_active %}
                    <span class="inline-block px-2 py-0.5 rounded text-xs bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">{% trans %}Inactive{% endtrans %}</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="flex gap-2">
            <button class="btn-edit-plan px-3 py-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 text-sm font-medium transition-all" data-id="{{ plan.id }}" data-testid="btn-edit-plan-{{ plan.id }}">
                <i class="fa fa-edit mr-1"></i>{% trans %}Edit{% endtrans %}
            </button>
            {% if plan.id != 1 %}
            <form method="POST" action="{{ full_url('/admin/plans/' ~ plan.id ~ '/delete') }}" data-confirm="Delete plan '{{ plan.name }}'?&#10;&#10;• The plan will no longer be available for new subscriptions&#10;• Existing subscribers on this plan may be affected">
                <button type="submit" class="px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50 text-sm font-medium transition-all" data-testid="btn-delete-plan-{{ plan.id }}">
                    <i class="fa fa-trash mr-1"></i>{% trans %}Delete{% endtrans %}
                </button>
            </form>
            {% endif %}
        </div>
    </div>

    <div class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-3">
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Files/Day{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm" data-testid="text-plan-files-{{ plan.id }}">{% if plan.max_files_per_day == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_files_per_day }}{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}PDF/Day{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm">{% if plan.max_pdf_per_day == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_pdf_per_day }}{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Hash/Day{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm">{% if plan.max_hash_per_day == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_hash_per_day }}{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Screenshot/Day{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm">{% if plan.max_screenshot_per_day == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_screenshot_per_day }}{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}BG Remove/Day{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm">{% if plan.max_bg_remove_per_day == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_bg_remove_per_day }}{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}PDF Editor/Day{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm">{% if plan.get('max_pdf_editor_per_day', 3) == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.get('max_pdf_editor_per_day', 3) }}{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Max File Size{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm" data-testid="text-plan-size-{{ plan.id }}">{% if plan.max_file_size_mb == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_file_size_mb }} MB{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Auto-Delete{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm" data-testid="text-plan-delete-{{ plan.id }}">{% if plan.auto_delete_hours == 0 %}{% trans %}Never{% endtrans %}{% else %}{{ plan.auto_delete_hours }}h{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}History Stored{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm" data-testid="text-plan-history-{{ plan.id }}">{% if plan.max_conversions_stored == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.max_conversions_stored }}{% endif %}</div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Queue Priority{% endtrans %}</div>
            <div class="mt-1 font-semibold text-sm
                {% if plan.get('queue','low') == 'high' %}text-green-600 dark:text-green-400
                {% elif plan.get('queue','low') == 'medium' %}text-yellow-600 dark:text-yellow-400
                {% else %}text-gray-500 dark:text-gray-400{% endif %}">
                {% if plan.get('queue','low') == 'high' %}<i class="fa fa-arrow-up mr-1"></i>{% trans %}High{% endtrans %}
                {% elif plan.get('queue','low') == 'medium' %}<i class="fa fa-minus mr-1"></i>{% trans %}Medium{% endtrans %}
                {% else %}<i class="fa fa-arrow-down mr-1"></i>{% trans %}Low{% endtrans %}{% endif %}
            </div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}API Access{% endtrans %}</div>
            <div class="mt-1 font-semibold text-sm {% if plan.get('api_enabled',0)|int %}text-green-600 dark:text-green-400{% else %}text-red-500 dark:text-red-400{% endif %}">
                {% if plan.get('api_enabled',0)|int %}<i class="fa fa-check-circle mr-1"></i>{% trans %}Enabled{% endtrans %}{% else %}<i class="fa fa-times-circle mr-1"></i>{% trans %}Disabled{% endtrans %}{% endif %}
            </div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}API Calls/Day{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm">
                {% if not plan.get('api_enabled',0)|int %}—{% elif plan.get('api_calls_per_day',100)|int == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.get('api_calls_per_day',100) }}{% endif %}
            </div>
        </div>
        <div class="text-center p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <div class="text-xs text-gray-500 dark:text-gray-400">{% trans %}API Calls/Min{% endtrans %}</div>
            <div class="mt-1 font-semibold text-gray-800 dark:text-gray-200 text-sm">
                {% if not plan.get('api_enabled',0)|int %}—{% elif plan.get('api_calls_per_minute',10)|int == -1 %}{% trans %}Unlimited{% endtrans %}{% else %}{{ plan.get('api_calls_per_minute',10) }}{% endif %}
            </div>
        </div>
    </div>

    {% if plan.price_monthly > 0 %}
    <div class="mt-3 flex flex-wrap items-center gap-2">
        {% if plan.stripe_price_id and plan.get('stripe_key_mode', '') == stripe_mode %}
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-xs font-medium">
            <i class="fa fa-check-circle"></i> Stripe synced ({{ plan.get('stripe_key_mode', '') }})
        </span>
        {% elif plan.stripe_price_id and plan.get('stripe_key_mode', '') and plan.get('stripe_key_mode', '') != stripe_mode %}
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-medium">
            <i class="fa fa-exclamation-triangle"></i> Stripe: wrong mode ({{ plan.get('stripe_key_mode', '') }}, key is {{ stripe_mode }})
        </span>
        {% elif plan.stripe_price_id and not plan.get('stripe_key_mode', '') %}
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400 text-xs font-medium">
            <i class="fa fa-exclamation-circle"></i> Stripe: needs sync (unknown mode)
        </span>
        {% else %}
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 text-xs font-medium">
            <i class="fa fa-clock"></i> Stripe: auto-syncs on first purchase
        </span>
        {% endif %}
        <form method="POST" action="{{ full_url('/admin/plans/' ~ plan.id ~ '/reset-stripe') }}" class="inline" data-confirm="Clear Stripe IDs for this plan?&#10;&#10;• The Stripe product/price IDs will be cleared&#10;• New IDs will be auto-created on the next purchase&#10;• No existing subscriptions will be affected">
            <button type="submit" class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 text-xs transition-all">
                <i class="fa fa-undo"></i> Reset Stripe
            </button>
        </form>
    </div>
    {% endif %}
    {% if plan.paypal_plan_id %}
    <div class="mt-2 flex flex-wrap gap-2">
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 text-xs">
            <i class="fa fa-paypal"></i> {% trans %}PayPal:{% endtrans %} {{ plan.paypal_plan_id }}
        </span>
    </div>
    {% endif %}

    <!-- Edit form (hidden by default) -->
    <form class="edit-plan-form hidden mt-5 pt-5 border-t border-gray-100 dark:border-gray-800" method="POST" action="{{ full_url('/admin/plans/' ~ plan.id ~ '/update') }}" data-id="{{ plan.id }}" data-testid="form-edit-plan-{{ plan.id }}">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Plan Name{% endtrans %}</label>
                <input type="text" name="name" value="{{ plan.name }}" required class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-name-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Price/Month ($){% endtrans %}</label>
                <input type="number" name="price_monthly" value="{{ plan.price_monthly }}" min="0" step="0.01" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-price-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Converter Files/Day (-1=∞){% endtrans %}</label>
                <input type="number" name="max_files_per_day" value="{{ plan.max_files_per_day }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-files-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}PDF/Day (-1=∞){% endtrans %}</label>
                <input type="number" name="max_pdf_per_day" value="{{ plan.max_pdf_per_day or 3 }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Hash/Day (-1=∞){% endtrans %}</label>
                <input type="number" name="max_hash_per_day" value="{{ plan.max_hash_per_day or 10 }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Screenshot/Day (-1=∞){% endtrans %}</label>
                <input type="number" name="max_screenshot_per_day" value="{{ plan.max_screenshot_per_day or 5 }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}BG Remove/Day (-1=∞){% endtrans %}</label>
                <input type="number" name="max_bg_remove_per_day" value="{{ plan.max_bg_remove_per_day or 3 }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}PDF Editor/Day (-1=∞){% endtrans %}</label>
                <input type="number" name="max_pdf_editor_per_day" value="{{ plan.get('max_pdf_editor_per_day', 3) }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max File Size (MB, -1=∞){% endtrans %}</label>
                <input type="number" name="max_file_size_mb" value="{{ plan.max_file_size_mb }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-maxsize-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Batch Files (per job, 0=∞){% endtrans %}</label>
                <input type="number" name="max_batch_files" value="{{ plan.get('max_batch_files', 20) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-batchfiles-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Auto-Delete (hours, 0=never){% endtrans %}</label>
                <input type="number" name="auto_delete_hours" value="{{ plan.auto_delete_hours }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-autodelete-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Conversions Stored (-1=∞){% endtrans %}</label>
                <input type="number" name="max_conversions_stored" value="{{ plan.max_conversions_stored }}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-history-{{ plan.id }}">
            </div>
            <div class="flex items-center gap-2 pt-5">
                <input type="checkbox" name="is_active" id="active-{{ plan.id }}" {% if plan.is_active %}checked{% endif %} class="rounded" data-testid="input-plan-active-{{ plan.id }}">
                <label for="active-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Active{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-5">
                <input type="checkbox" name="job_notify_email" id="job-notify-email-{{ plan.id }}" {% if plan.get('job_notify_email', 0)|int %}checked{% endif %} class="rounded">
                <label for="job-notify-email-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Email Job Notifications{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-5">
                <input type="checkbox" name="batch_archive_download" id="batch-archive-{{ plan.id }}" {% if plan.get('batch_archive_download', 0)|int %}checked{% endif %} class="rounded">
                <label for="batch-archive-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Batch Archive Download{% endtrans %}</label>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Processing Time Limit (sec, 0=∞){% endtrans %}</label>
                <input type="number" name="max_processing_seconds" value="{{ plan.get('max_processing_seconds', 0) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-timeout-{{ plan.id }}">
            </div>
            <div class="col-span-full">
                <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                    <p class="text-xs font-semibold text-teal-600 dark:text-teal-400 uppercase tracking-wide mb-2"><i class="fa fa-share-nodes mr-1"></i>{% trans %}Sharing & Cloud Export{% endtrans %}</p>
                </div>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="share_link_enabled" id="share-link-{{ plan.id }}" {% if plan.get('share_link_enabled',0)|int %}checked{% endif %} class="rounded">
                <label for="share-link-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Share Links{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="share_link_password" id="share-pw-{{ plan.id }}" {% if plan.get('share_link_password',0)|int %}checked{% endif %} class="rounded">
                <label for="share-pw-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Password Protection{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="share_link_onetime" id="share-onetime-{{ plan.id }}" {% if plan.get('share_link_onetime',0)|int %}checked{% endif %} class="rounded">
                <label for="share-onetime-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}One-Time Links{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="share_link_expiry" id="share-expiry-{{ plan.id }}" {% if plan.get('share_link_expiry',0)|int %}checked{% endif %} class="rounded">
                <label for="share-expiry-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Custom Link Expiry{% endtrans %}</label>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Expiry (hours, 0=no cap){% endtrans %}</label>
                <input type="number" name="share_link_max_expiry_hours" value="{{ plan.get('share_link_max_expiry_hours', 0) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Share Links per File (0=unlimited){% endtrans %}</label>
                <input type="number" name="share_link_max_per_job" value="{{ plan.get('share_link_max_per_job', 0) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="cloud_export_google_drive" id="cloud-gdrive-{{ plan.id }}" {% if plan.get('cloud_export_google_drive',0)|int %}checked{% endif %} class="rounded">
                <label for="cloud-gdrive-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-brands fa-google-drive text-blue-500 mr-1"></i>{% trans %}Cloud: Google Drive{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="cloud_export_dropbox" id="cloud-dropbox-{{ plan.id }}" {% if plan.get('cloud_export_dropbox',0)|int %}checked{% endif %} class="rounded">
                <label for="cloud-dropbox-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-brands fa-dropbox text-blue-600 mr-1"></i>{% trans %}Cloud: Dropbox{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="cloud_export_onedrive" id="cloud-onedrive-{{ plan.id }}" {% if plan.get('cloud_export_onedrive',0)|int %}checked{% endif %} class="rounded">
                <label for="cloud-onedrive-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-cloud text-blue-400 mr-1"></i>{% trans %}Cloud: OneDrive{% endtrans %}</label>
            </div>
            <div class="col-span-full">
                <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                    <p class="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide mb-2">{% trans %}API Access{% endtrans %}</p>
                </div>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="api_enabled" id="api-enabled-{{ plan.id }}" {% if plan.get('api_enabled',0)|int %}checked{% endif %} class="rounded" data-testid="input-plan-api-enabled-{{ plan.id }}">
                <label for="api-enabled-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Enable API Access for this plan{% endtrans %}</label>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}API Calls/Day (-1=∞){% endtrans %}</label>
                <input type="number" name="api_calls_per_day" value="{{ plan.get('api_calls_per_day', 100) }}" min="-1" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-api-day-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}API Calls/Minute (-1=∞){% endtrans %}</label>
                <input type="number" name="api_calls_per_minute" value="{{ plan.get('api_calls_per_minute', 10) }}" min="-1" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-plan-api-min-{{ plan.id }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Queue Priority{% endtrans %}</label>
                <select name="queue" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="select-plan-queue-{{ plan.id }}">
                    <option value="high"   {% if plan.get('queue','low') == 'high'   %}selected{% endif %}>⬆ High – processed first</option>
                    <option value="medium" {% if plan.get('queue','low') == 'medium' %}selected{% endif %}>▬ Medium – processed second</option>
                    <option value="low"    {% if plan.get('queue','low') == 'low'    %}selected{% endif %}>⬇ Low – processed last</option>
                </select>
            </div>
            <div class="col-span-full">
                <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                    <p class="text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wide mb-2"><i class="fa fa-users mr-1"></i>{% trans %}Teams & Workspaces{% endtrans %}</p>
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Teams (0=disabled){% endtrans %}</label>
                <input type="number" name="max_teams" value="{{ plan.get('max_teams', 0) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Sub-Teams per Team (0=none){% endtrans %}</label>
                <input type="number" name="max_sub_teams" value="{{ plan.get('max_sub_teams', 0) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Members per Team (0=unlimited){% endtrans %}</label>
                <input type="number" name="max_members_per_team" value="{{ plan.get('max_members_per_team', 0) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div class="col-span-full">
                <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                    <p class="text-xs font-semibold text-primary dark:text-primary-light uppercase tracking-wide mb-2"><i class="fa fa-qrcode mr-1"></i>{% trans %}QR Code Features{% endtrans %}</p>
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Dynamic QR Limit (0=unlimited, -1=none, or a positive number){% endtrans %}</label>
                <input type="number" name="qr_dynamic_limit" value="{{ plan.get('qr_dynamic_limit', 2) }}" min="-1" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Analytics History (days, 0=disabled){% endtrans %}</label>
                <input type="number" name="qr_analytics_days" value="{{ plan.get('qr_analytics_days', 30) }}" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
            </div>
            <div class="flex items-center gap-2 pt-4">
                <input type="checkbox" name="qr_watermark_free" id="qr-watermark-{{ plan.id }}" {% if plan.get('qr_watermark_free',0)|int %}checked{% endif %} class="rounded">
                <label for="qr-watermark-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Remove Watermark{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-4">
                <input type="checkbox" name="qr_csv_export" id="qr-csv-{{ plan.id }}" {% if plan.get('qr_csv_export',0)|int %}checked{% endif %} class="rounded">
                <label for="qr-csv-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}CSV Scan Export{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-4">
                <input type="checkbox" name="qr_gps_analytics" id="qr-gps-{{ plan.id }}" {% if plan.get('qr_gps_analytics',0)|int %}checked{% endif %} class="rounded">
                <label for="qr-gps-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}GPS / Location Analytics{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-4">
                <input type="checkbox" name="qr_api_access" id="qr-api-{{ plan.id }}" {% if plan.get('qr_api_access',0)|int %}checked{% endif %} class="rounded">
                <label for="qr-api-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}QR API Access{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-4">
                <input type="checkbox" name="qr_advanced_customization" id="qr-custom-{{ plan.id }}" {% if plan.get('qr_advanced_customization',1)|int %}checked{% endif %} class="rounded">
                <label for="qr-custom-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Advanced Customization{% endtrans %}</label>
            </div>
            <div class="col-span-full">
                <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                    <p class="text-xs font-semibold text-indigo-600 dark:text-indigo-400 uppercase tracking-wide mb-2"><i class="fa fa-rectangle-ad mr-1"></i>{% trans %}Ads & Head HTML{% endtrans %}</p>
                </div>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="ad_free" id="ad-free-{{ plan.id }}" {% if plan.get('ad_free',0)|int %}checked{% endif %} class="rounded">
                <label for="ad-free-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Ad Free{% endtrans %}</label>
            </div>
            <div class="flex items-center gap-2 pt-1">
                <input type="checkbox" name="plan_head_html_enabled" id="plan-head-html-{{ plan.id }}" {% if plan.get('plan_head_html_enabled',1)|int %}checked{% endif %} class="rounded">
                <label for="plan-head-html-{{ plan.id }}" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Plan Head HTML Enabled{% endtrans %}</label>
            </div>
        </div>
        <div class="flex gap-3 mt-4">
            <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all" data-testid="btn-save-plan-{{ plan.id }}">{% trans %}Save Changes{% endtrans %}</button>
            <button type="button" class="btn-cancel-edit px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-id="{{ plan.id }}" data-testid="btn-cancel-edit-{{ plan.id }}">{% trans %}Cancel{% endtrans %}</button>
        </div>
    </form>
</div>
{% endfor %}
</div>

<!-- Create Plan Modal -->
<div id="modal-create-plan" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 overflow-y-auto py-8">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 max-w-lg w-full mx-4 border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">{% trans %}Create New Plan{% endtrans %}</h3>
        <form method="POST" action="{{ full_url('/admin/plans/create') }}">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Plan Name *{% endtrans %}</label>
                    <input type="text" name="name" required placeholder="{% trans %}e.g. Pro{% endtrans %}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-name">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Slug *{% endtrans %}</label>
                    <input type="text" name="slug" required placeholder="{% trans %}e.g. pro{% endtrans %}" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-slug">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Price/Month ($){% endtrans %}</label>
                    <input type="number" name="price_monthly" value="0" min="0" step="0.01" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-price">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Converter Files/Day (-1=∞){% endtrans %}</label>
                    <input type="number" name="max_files_per_day" value="5" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-files">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}PDF/Day (-1=∞){% endtrans %}</label>
                    <input type="number" name="max_pdf_per_day" value="3" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Hash/Day (-1=∞){% endtrans %}</label>
                    <input type="number" name="max_hash_per_day" value="10" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Screenshot/Day (-1=∞){% endtrans %}</label>
                    <input type="number" name="max_screenshot_per_day" value="5" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}BG Remove/Day (-1=∞){% endtrans %}</label>
                    <input type="number" name="max_bg_remove_per_day" value="3" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}PDF Editor/Day (-1=∞){% endtrans %}</label>
                    <input type="number" name="max_pdf_editor_per_day" value="3" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max File Size (MB, -1=∞){% endtrans %}</label>
                    <input type="number" name="max_file_size_mb" value="50" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-maxsize">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Batch Files (per job, 0=∞){% endtrans %}</label>
                    <input type="number" name="max_batch_files" value="20" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-batchfiles">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Auto-Delete Hours (0=never){% endtrans %}</label>
                    <input type="number" name="auto_delete_hours" value="24" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-autodelete">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Conversions Stored (-1=∞){% endtrans %}</label>
                    <input type="number" name="max_conversions_stored" value="10" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-history">
                </div>
                <div class="flex items-center gap-2 pt-5">
                    <input type="checkbox" name="job_notify_email" id="new-plan-job-notify-email" class="rounded">
                    <label for="new-plan-job-notify-email" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Email Job Notifications{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-5">
                    <input type="checkbox" name="batch_archive_download" id="new-plan-batch-archive" class="rounded">
                    <label for="new-plan-batch-archive" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Batch Archive Download{% endtrans %}</label>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Processing Time Limit (sec, 0=∞){% endtrans %}</label>
                    <input type="number" name="max_processing_seconds" value="120" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-timeout">
                </div>
                <div class="col-span-full">
                    <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                        <p class="text-xs font-semibold text-teal-600 dark:text-teal-400 uppercase tracking-wide mb-2"><i class="fa fa-share-nodes mr-1"></i>{% trans %}Sharing & Cloud Export{% endtrans %}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="share_link_enabled" id="new-plan-share-link" class="rounded">
                    <label for="new-plan-share-link" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Share Links{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="share_link_password" id="new-plan-share-pw" class="rounded">
                    <label for="new-plan-share-pw" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Password Protection{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="share_link_onetime" id="new-plan-share-ot" class="rounded">
                    <label for="new-plan-share-ot" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}One-Time Links{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="share_link_expiry" id="new-plan-share-exp" class="rounded">
                    <label for="new-plan-share-exp" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Custom Link Expiry{% endtrans %}</label>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Expiry (hours, 0=no cap){% endtrans %}</label>
                    <input type="number" name="share_link_max_expiry_hours" value="0" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Max Share Links per File (0=unlimited){% endtrans %}</label>
                    <input type="number" name="share_link_max_per_job" value="0" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="cloud_export_google_drive" id="new-plan-gdrive" class="rounded">
                    <label for="new-plan-gdrive" class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-brands fa-google-drive text-blue-500 mr-1"></i>{% trans %}Cloud: Google Drive{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="cloud_export_dropbox" id="new-plan-dropbox" class="rounded">
                    <label for="new-plan-dropbox" class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-brands fa-dropbox text-blue-600 mr-1"></i>{% trans %}Cloud: Dropbox{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="cloud_export_onedrive" id="new-plan-onedrive" class="rounded">
                    <label for="new-plan-onedrive" class="text-sm text-gray-700 dark:text-gray-300"><i class="fa fa-cloud text-blue-400 mr-1"></i>{% trans %}Cloud: OneDrive{% endtrans %}</label>
                </div>
                <div class="col-span-full">
                    <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                        <p class="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide mb-2">{% trans %}API Access{% endtrans %}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 pt-1 col-span-full">
                    <input type="checkbox" name="api_enabled" id="new-plan-api-enabled" class="rounded" data-testid="input-new-plan-api-enabled">
                    <label for="new-plan-api-enabled" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Enable API Access for this plan{% endtrans %}</label>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}API Calls/Day (-1=∞){% endtrans %}</label>
                    <input type="number" name="api_calls_per_day" value="100" min="-1" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-api-day">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}API Calls/Minute (-1=∞){% endtrans %}</label>
                    <input type="number" name="api_calls_per_minute" value="10" min="-1" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="input-new-plan-api-min">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Queue Priority{% endtrans %}</label>
                    <select name="queue" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" data-testid="select-new-plan-queue">
                        <option value="high">⬆ High – processed first</option>
                        <option value="medium">▬ Medium – processed second</option>
                        <option value="low" selected>⬇ Low – processed last</option>
                    </select>
                </div>
                <div class="col-span-full">
                    <div class="border-t border-gray-200 dark:border-gray-700 my-2 pt-2">
                        <p class="text-xs font-semibold text-primary dark:text-primary-light uppercase tracking-wide mb-2"><i class="fa fa-qrcode mr-1"></i>{% trans %}QR Code Features{% endtrans %}</p>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Dynamic QR Limit (0=unlimited, -1=none, positive=max){% endtrans %}</label>
                    <input type="number" name="qr_dynamic_limit" value="2" min="-1" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Analytics History (days, 0=disabled){% endtrans %}</label>
                    <input type="number" name="qr_analytics_days" value="0" min="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                </div>
                <div class="flex items-center gap-2 pt-4">
                    <input type="checkbox" name="qr_watermark_free" id="new-plan-qr-watermark" class="rounded">
                    <label for="new-plan-qr-watermark" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Remove Watermark{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-4">
                    <input type="checkbox" name="qr_csv_export" id="new-plan-qr-csv" class="rounded">
                    <label for="new-plan-qr-csv" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}CSV Scan Export{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-4">
                    <input type="checkbox" name="qr_gps_analytics" id="new-plan-qr-gps" class="rounded">
                    <label for="new-plan-qr-gps" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}GPS / Country Analytics{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-4">
                    <input type="checkbox" name="qr_api_access" id="new-plan-qr-api" class="rounded">
                    <label for="new-plan-qr-api" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}QR API Access{% endtrans %}</label>
                </div>
                <div class="flex items-center gap-2 pt-4">
                    <input type="checkbox" name="qr_advanced_customization" id="new-plan-qr-custom" class="rounded" checked>
                    <label for="new-plan-qr-custom" class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Advanced Customization{% endtrans %}</label>
                </div>
            </div>
            <div class="flex gap-3 mt-5 justify-end">
                <button type="button" id="modal-cancel-plan" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-cancel-create-plan">{% trans %}Cancel{% endtrans %}</button>
                <button type="submit" class="px-4 py-2 rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-semibold transition-all" data-testid="btn-submit-create-plan">{% trans %}Create Plan{% endtrans %}</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
$(function() {
    $('#btn-create-plan').on('click', function() {
        $('#modal-create-plan').removeClass('hidden');
    });
    $('#modal-cancel-plan').on('click', function() {
        $('#modal-create-plan').addClass('hidden');
    });

    $(document).on('click', '.btn-edit-plan', function() {
        var id = $(this).data('id');
        $('[data-testid="form-edit-plan-' + id + '"]').toggleClass('hidden');
    });

    $(document).on('click', '.btn-cancel-edit', function() {
        var id = $(this).data('id');
        $('[data-testid="form-edit-plan-' + id + '"]').addClass('hidden');
    });
});
</script>
{% endblock %}