<div class="skill-group-block">
    <div class="skill-group-head">
        <strong>@Title</strong>
        @if (ShowGroupActions && SkillGroupId.HasValue)
        {
            <div class="skill-chip-actions">
                <button
                    type="button"
                    class="chip-button"
                    title="Edit skill group"
                    disabled="@(IsMutating || !CanEditGroup)"
                    @onclick="() => EditGroupRequested.InvokeAsync(SkillGroupId.Value)">
                    <span aria-hidden="true" class="emoji">✏️</span>
                    <span class="sr-only">Edit @Title</span>
                </button>
                <button
                    type="button"
                    class="chip-button"
                    title="Delete skill group"
                    disabled="@(IsMutating || !CanEditGroup)"
                    @onclick="() => DeleteGroupRequested.InvokeAsync(SkillGroupId.Value)">
                    <span aria-hidden="true" class="emoji">🗑️</span>
                    <span class="sr-only">Delete @Title</span>
                </button>
            </div>
        }
    </div>
    @if (!HasSkillFilter && Skills.Count == 0)
    {
        <p class="empty">@EmptyMessage</p>
    }
    <div class="skill-list">
        @foreach (var skill in Skills)
        {
            <div class="skill-item">
                <div class="skill-details">
                    <strong>@skill.Name</strong>
                    <span>@SkillDefinitionLabel(skill)</span>
                </div>
                <div class="skill-chip-actions">
                    <button
                        type="button"
                        class="chip-button"
                        title="Edit skill"
                        disabled="@(IsMutating || !CanEditSkill(skill))"
                        @onclick="() => EditSkillRequested.InvokeAsync(skill)">
                        <span aria-hidden="true" class="emoji">✏️</span>
                        <span class="sr-only">Edit @skill.Name</span>
                    </button>
                    <button
                        type="button"
                        class="chip-button"
                        title="Roll skill"
                        disabled="@(IsMutating)"
                        @onclick="() => RollSkillRequested.InvokeAsync(skill)">
                        <span aria-hidden="true" class="emoji">🎲</span>
                        <span class="sr-only">Roll @skill.Name</span>
                    </button>
                    <button
                        type="button"
                        class="chip-button"
                        title="Delete skill"
                        disabled="@(IsMutating || !CanEditSkill(skill))"
                        @onclick="() => DeleteSkillRequested.InvokeAsync(skill.Id)">
                        <span aria-hidden="true" class="emoji">🗑️</span>
                        <span class="sr-only">Delete @skill.Name</span>
                    </button>
                </div>
            </div>
        }
        <button
            type="button"
            class="skill-item create-skill-item"
            disabled="@(IsMutating || !CanCreateSkill)"
            @onclick="() => AddSkillRequested.InvokeAsync(SkillGroupId)">
            <span class="skill-create-icon" aria-hidden="true">+</span>
            <span>Add skill</span>
        </button>
    </div>
</div>