<div class="card my-2 {{class}}" {{#if id}}id="{{id}}"{{/if}}>
    {{#if title}}
        <div class="card-header {{#if compact}}py-2{{/if}}">
            <h2 class="card-title">{{title}}</h2>
        </div>
    {{/if}}
    <div class="list-group list-group-flush list-group-hoverable">
        {{#each_row}}
        <div {{#if id}}id="{{id}}"{{/if}}
            class="list-group-item list-group-item-action p-0 {{#if active}}active{{/if}} {{class}}">
            <div class="row align-items-center m-0">
                {{#if link}}<a href="{{link}}"
                {{~else}}<div {{/if}}
                    class="col row align-items-center text-decoration-none text-body m-0 {{#if ../compact}}p-1{{else}}p-3{{/if}}">
                    {{#if color}}
                        <div class="col-auto"><span class="badge bg-{{color}}"></span></div>
                    {{/if}}
                    {{#if icon}}
                        <div class="col-auto fs-2">
                            {{~icon_img icon~}}
                        </div>
                    {{/if}}
                    {{#if image_url}}
                        <div class="col-auto">
                            <img src="{{image_url}}" class="avatar avatar-md rounded" width="45" height="45" alt="{{title}}" />
                        </div>
                    {{/if}}
                    <div class="col {{#if ../wrap}}text-wrap{{else}}text-truncate{{/if}}">
                        {{title}}
                        {{~#if (or description description_md)~}}
                        <div class="text-muted text-truncate{{#if ../compact}} mt-n1{{/if}}{{#if ../wrap}} text-wrap{{/if}}">
                            {{~description~}}
                            {{~#if description_md~}}
                                <div style="margin-bottom: -1rem">{{{markdown description_md}}}</div>
                            {{~/if~}}
                        </div>
                        {{~/if~}}
                    </div>

                {{#if link}}
                    </a>
                {{else}}
                    </div>
                {{/if}}
                {{#if view_link}}
                    <a href="{{view_link}}" class="link-secondary col-auto" title="View">
                        {{~icon_img 'eye'~}}
                    </a>
                {{/if}}

                {{#if delete_link}}
                    <form method="POST" action="{{delete_link}}" class="col-auto m-0 p-0">
                        <button type="submit" class="btn btn-link link-secondary p-0 border-0 bg-transparent" title="Delete">
                            {{~icon_img 'trash'~}}
                        </button>
                    </form>
                {{/if}}

                {{#if edit_link}}
                    <a href="{{edit_link}}" class="link-secondary col-auto" title="Edit">
                        {{~icon_img 'edit'~}}
                    </a>
                {{/if}}
            </div>
        </div>
        {{/each_row}}
        {{#if (eq @row_index 0)}}
            <a href="{{default empty_link '#'}}" class="list-group-item list-group-item-action">
                <div class="row align-items-center">
                    <div class="col {{#if ../wrap}}text-wrap{{else}}text-truncate{{/if}}">
                        {{default empty_title 'No item'}}
                        <div class="text-muted text-truncate{{#if ../compact}} mt-n1{{/if}}{{#if ../wrap}} text-wrap{{/if}}">
                            {{~empty_description~}}
                            {{~#if empty_description_md~}}
                                <div style="margin-bottom: -1rem">{{{markdown empty_description_md}}}</div>
                            {{~/if~}}
                        </div>
                    </div>
                </div>
            </a>
        {{/if}}
    </div>
</div>
