{% extends "base.html" %}

{% block title %}分类管理{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <div class="mb-4">
            <h5>添加主分类</h5>
            <form method="post" action="{{ url_for('add_main_category') }}" class="d-flex align-items-center gap-2">
                <input type="text" name="id" class="form-control" placeholder="主分类 ID" required style="width: 120px;">
                <input type="text" name="name" class="form-control" placeholder="主分类名称" required style="width: 150px;">
                <input type="number" name="weight" class="form-control" placeholder="权重" value="0" style="width: 80px;">
                <input type="color" name="color" class="form-control form-control-color" value="#4361ee" title="选择颜色" style="width: 50px;">
                <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="main_private" name="private">
                    <label class="form-check-label" for="main_private">私有</label>
                </div>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-plus"></i> 添加
                </button>
            </form>
        </div>

        <div class="mb-4">
            <h5>添加子分类</h5>
            <form method="post" action="{{ url_for('add_sub_category') }}" class="d-flex align-items-center gap-2">
                <select name="main_id" class="form-select" required style="width: 150px;">
                    <option value="">选择主分类</option>
                    {% for main_id, cat in categories.items() %}
                        <option value="{{ main_id }}">{{ cat.name }}</option>
                    {% endfor %}
                </select>
                <input type="text" name="sub_id" class="form-control" placeholder="子分类 ID" required style="width: 120px;">
                <input type="text" name="sub_name" class="form-control" placeholder="子分类名称" required style="width: 150px;">
                <input type="number" name="weight" class="form-control" placeholder="权重" value="0" style="width: 80px;">
                <input type="color" name="color" class="form-control form-control-color" value="#4895ef" title="选择颜色" style="width: 50px;">
                <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" id="sub_private" name="private">
                    <label class="form-check-label" for="sub_private">私有</label>
                </div>
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-plus"></i> 添加
                </button>
            </form>
        </div>

        <div>
            <h5>已存在的分类</h5>
            <div class="list-group">
                {% for main_id, cat in categories.items() %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>{{ cat.name }}</strong>（ID: {{ main_id }})
                                <span class="badge" style="background-color: {{ cat.color }}; color: white;">{{ cat.color }}</span>
                                {% if cat.get('private', False) %}
                                    <span class="badge bg-warning text-dark ms-2">私有</span>
                                {% endif %}
                            </div>
                            <div>
                                <a href="{{ url_for('edit_main_category', main_id=main_id) }}"
                                   class="btn btn-sm btn-primary me-2">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="{{ url_for('delete_main_category', main_id=main_id) }}"
                                   class="btn btn-sm btn-danger"
                                   onclick="return confirm('确认删除整个主分类？')">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </div>
                        </div>
                        <ul class="mt-2 list-group list-group-flush">
                            {% for sub_id, subData in cat.sub.items() %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span>
                                        {{ subData.name }}（ID: {{ sub_id }})
                                        <span class="badge" style="background-color: {{ subData.color }}; color: white;">{{ subData.color }}</span>
                                        {% if cat.get('sub_private', {}).get(sub_id, False) %}
                                            <span class="badge bg-warning text-dark ms-2">私有</span>
                                        {% endif %}
                                    </span>
                                    <div>
                                        <a href="{{ url_for('edit_sub_category', main_id=main_id, sub_id=sub_id) }}"
                                           class="btn btn-sm btn-primary me-2">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        <a href="{{ url_for('delete_sub_category', main_id=main_id, sub_id=sub_id) }}"
                                           class="btn btn-sm btn-outline-danger"
                                           onclick="return confirm('确认删除该子分类？')">
                                            <i class="fas fa-trash"></i> 删除
                                        </a>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="mt-4">
            <a href="{{ url_for('index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回首页
            </a>
        </div>
    </div>
</div>
{% endblock %}