{% extends "shopyo_base/module_base.html" %}

{% set active_page ='' %}

{% block pagehead %}
<title>Theme Store</title>
{% endblock %}

{% block sidebar %}
  {%include '{}/blocks/sidebar.html'.format(module_info['module_name'])%}
{%endblock%}

{% block content %}
<div class="container-fluid py-4">
    <div class="mb-5">
        <h2 class="section-title">Front Themes</h2>
        <div class="row">
            {% for key in all_front_info %}
            <div class="col-md-4 mb-4">
                <div class="card theme-card h-100">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title">{{ key|capitalize }}</h5>
                            {% if active_front_theme == key %}
                                <span class="badge badge-active">Active</span>
                            {% endif %}
                        </div>
                        <p class="card-text mb-4 text-muted">
                            by <strong>{{ all_front_info[key]['author']['name'] or 'Unknown' }}</strong>
                        </p>
                        <div class="mt-auto">
                            {% if active_front_theme != key %}
                                <a href="{{ url_for('shopyo_theme.activate_front_theme', theme_name=key) }}" class="btn btn-primary btn-block">Activate</a>
                            {% else %}
                                <button class="btn btn-success btn-block" disabled>Activated</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <div>
        <h2 class="section-title">Back Themes</h2>
        <div class="row">
            {% for key in all_back_info %}
            <div class="col-md-4 mb-4">
                <div class="card theme-card h-100">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title">{{ key|capitalize }}</h5>
                            {% if active_back_theme == key %}
                                <span class="badge badge-active">Active</span>
                            {% endif %}
                        </div>
                        <p class="card-text mb-4 text-muted">
                            by <strong>{{ all_back_info[key]['author']['name'] or 'Unknown' }}</strong>
                        </p>
                        <div class="mt-auto">
                            {% if active_back_theme != key %}
                                <a href="{{ url_for('shopyo_theme.activate_back_theme', theme_name=key) }}" class="btn btn-primary btn-block">Activate</a>
                            {% else %}
                                <button class="btn btn-success btn-block" disabled>Activated</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}