{#
设定卡片组件
============

参数:
- title: 卡片标题
- icon: 标题图标 (可选)
- card_id: 卡片 ID (可选)
- content: 卡片内容 (使用 caller() 传入)

使用方式:
{% call settings_card(title="介面设定", icon="🎨") %}
    <!-- 卡片内容 -->
{% endcall %}
#}

{% macro settings_card(title, icon="", card_id="") %}
<div class="settings-card"{% if card_id %} id="{{ card_id }}"{% endif %}>
    <div class="settings-card-header">
        <h3 class="settings-card-title">
            {% if icon %}{{ icon }} {% endif %}{{ title }}
        </h3>
    </div>
    <div class="settings-card-body">
        {{ caller() }}
    </div>
</div>
{% endmacro %}

{#
设定项目组件
============

参数:
- label: 设定项目标签
- description: 设定项目描述
- is_last: 是否为最后一个项目 (影响边框显示)
- control: 控制元件内容 (使用 caller() 传入)

使用方式:
{% call setting_item(label="自动关闭页面", description="提交回馈后自动关闭页面") %}
    <div id="autoCloseToggle" class="toggle-switch active">
        <div class="toggle-knob"></div>
    </div>
{% endcall %}
#}

{% macro setting_item(label, description="", is_last=false) %}
<div class="setting-item"{% if is_last %} style="border-bottom: none;"{% endif %}>
    <div class="setting-info">
        <div class="setting-label">{{ label }}</div>
        {% if description %}
        <div class="setting-description">{{ description }}</div>
        {% endif %}
    </div>
    {{ caller() }}
</div>
{% endmacro %}