<section class="category {{#if level}}category-level-{{level}}{{else}}category-level-1{{/if}}"
         id="{{#if slug}}{{slug}}{{else}}{{name}}{{/if}}"
         data-type="category"
         data-id="{{#if slug}}{{slug}}{{else}}{{name}}{{/if}}"
         data-name="{{name}}"
         data-icon="{{icon}}"
         data-level="{{#if level}}{{level}}{{else}}1{{/if}}"
         data-container="categories">
    
    <div class="category-header"{{#if subcategories}} data-toggle="category"{{else}}{{#if groups}} data-toggle="category"{{else}}{{#if sites}} data-toggle="category"{{/if}}{{/if}}{{/if}}>
        <h{{#if level}}{{add level 1}}{{else}}2{{/if}} data-editable="category-name">
            <i class="{{icon}}"></i>
            {{name}}
            {{#if subcategories}}
                <span class="toggle-icon">
                    <i class="fas fa-chevron-down"></i>
                </span>
            {{else}}
                {{#if groups}}
                    <span class="toggle-icon">
                        <i class="fas fa-chevron-down"></i>
                    </span>
                {{else}}
                    {{#if sites}}
                        <span class="toggle-icon">
                            <i class="fas fa-chevron-down"></i>
                        </span>
                    {{/if}}
                {{/if}}
            {{/if}}
        </h{{#if level}}{{add level 1}}{{else}}2{{/if}}>
    </div>
    
    <div class="category-content">
        {{#if subcategories}}
            <div class="subcategories-container" data-container="subcategories">
                {{#each subcategories}}
                    {{#if ../level}}
                        {{> category level=(add ../level 1)}}
                    {{else}}
                        {{> category level=2}}
                    {{/if}}
                {{/each}}
            </div>
        {{/if}}
        
        {{#if groups}}
            <div class="groups-container" data-container="groups">
                {{#each groups}}
                    {{> group}}
                {{/each}}
            </div>
        {{/if}}
        
        {{#if sites}}
            <div class="sites-grid" data-container="sites">
                {{#if sites.length}}
                    {{#each sites}}
                        {{> site-card style=@root.siteCardStyle}}
                    {{/each}}
                {{else}}
                    <p class="empty-sites">暂无网站</p>
                {{/if}}
            </div>
        {{/if}}
        
        {{#unless subcategories}}
        {{#unless groups}}
        {{#unless sites}}
            <p class="empty-content">暂无内容</p>
        {{/unless}}
        {{/unless}}
        {{/unless}}
    </div>
</section>
