<!-- components/oxi-section/keyvalue -->
{{#if this.items.length}}

    {{#if @isCompact}}

        <span class="oxi-keyvalue">
            {{#each this.items as |item|}}
                <span class="{{item.className}} oxi-keyvalue-items">
                        {{#if item.preamble}}<i>{{item.preamble}}</i><br/>{{/if}}
                        {{#if item.label}}
                            <span class="text-secondary fw-bold {{if @meta.isInfoBox "oxi-keyvalue-label-infobox" "oxi-keyvalue-label"}}">
                                {{~item.label~}}
                            :</span>
                        {{/if}}
                        <OxiBase::Formatted
                            @format={{item.format}}
                            @value={{item.value}}
                            @truncate={{@meta.isInfoBox}}
                        />
                        {{#if item._refreshing}}
                            <span class="position-absolute top-0 end-0 badge bg-primary-subtle">
                                <span class="glyphicon glyphicon-refresh"></span>
                            </span>
                        {{/if}}
                </span>
            {{/each}}
        </span>

    {{else}}

        <div class="container-fluid oxi-keyvalue">
            {{#each this.items as |item|}}
                <div class="row {{item.className}} py-1 px-2">
                {{#if item.isHead}}
                    <div class="col-12 px-0 border-2 border-bottom mt-2 fst-italic">{{item.value}}</div>
                {{else}}
                    {{#if this.hasLabels}}
                        <div class="col-auto px-0 text-secondary fw-bold {{if @meta.isInfoBox "oxi-keyvalue-label-infobox" "oxi-keyvalue-label"}}">
                            {{~item.label~}}
                        </div>
                        <div class="col px-2 d-none d-md-block oxi-keyvalue-dots">
                        </div>
                    {{/if}}
                    {{! Infobox: at small screen size "md" we use MORE columns because the whole page layout
                        is changed at that size and the infobox will take complete screen width }}
                    <div class="{{if this.hasLabels (if @meta.isInfoBox "col-md-8 col-lg-6" "col-md-7 col-lg-8 col-xl-9") "col-12"}} px-0 ps-3 ps-md-1">
                        {{#if item.preamble}}<i>{{item.preamble}}</i><br/>{{/if}}
                        <OxiBase::Formatted
                            @format={{item.format}}
                            @value={{item.value}}
                            @truncate={{@meta.isInfoBox}}
                        />
                        {{#if item._refreshing}}
                            <span class="position-absolute top-0 end-0 badge bg-primary-subtle">
                                <span class="glyphicon glyphicon-refresh"></span>
                            </span>
                        {{/if}}
                    </div>
                {{/if}}
                </div>
            {{/each}}
        </div>

    {{/if}}

    <OxiBase::ButtonContainer @buttons={{@def.buttons}} />
{{/if}}
