{extend name="admin/layout" /}

{block name="content"}
<style>
.authority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.authority-item {
    border: 1px solid #e5e9f2;
    border-radius: 4px;
    padding: 14px;
    background: #fff;
    min-height: 124px;
}
.authority-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    margin-bottom: 10px;
}
.authority-item.is-off .authority-title,
.authority-item.is-off select {
    color: #d9534f;
}
.authority-help {
    color: #838383;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 8px;
}
</style>

<form id="authorityForm">
    <input type="hidden" name="allkey" value="{:session('allkey')}">
    {volist name="groups" id="group"}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">{$group.title}</h5>
        </div>
        <div class="card-body">
            <div class="authority-grid">
                {volist name="group.items" id="item"}
                    <div class="authority-item {:authority_value($siteConfig, $item['name'], $item['default']) == (string)$item['off'] ? 'is-off' : ''}">
                        <label class="authority-title" for="authority_{$item.name}">
                            <i class="mdi {$item.icon}"></i>
                            <span>{$item.label}</span>
                        </label>
                        <select class="form-control authority-select" id="authority_{$item.name}" name="{$item.name}" data-off="{$item.off}">
                            <option value="{$item.on}" {:authority_value($siteConfig, $item['name'], $item['default']) == (string)$item['on'] ? 'selected' : ''}>{$item.onText}</option>
                            <option value="{$item.off}" {:authority_value($siteConfig, $item['name'], $item['default']) == (string)$item['off'] ? 'selected' : ''}>{$item.offText}</option>
                        </select>
                        <div class="authority-help">{$item.help}</div>
                    </div>
                {/volist}
            </div>
        </div>
    </div>
    {/volist}

    <div class="card mb-4">
        <div class="card-body text-right">
            <button type="submit" class="btn btn-primary">保存权限设置</button>
        </div>
    </div>
</form>
{/block}

{block name="extraJs"}
<script>
function refreshAuthorityState() {
    $('.authority-select').each(function() {
        var item = $(this).closest('.authority-item');
        item.toggleClass('is-off', String($(this).val()) === String($(this).data('off')));
    });
}

$('.authority-select').on('change', refreshAuthorityState);
refreshAuthorityState();

$('#authorityForm').on('submit', function(e) {
    e.preventDefault();
    ajaxRequest('/admin/authority/save', $(this).serialize(), function(res) {
        alert(res.msg || '保存成功');
        location.reload();
    });
});
</script>
{/block}