wissyfaty
110 lines
4.0 KiB
Handlebars
110 lines
4.0 KiB
Handlebars
<div {{#if id}} id="{{id}}" {{/if~}}
|
|
class="row g-3 h-100 mb-2
|
|
{{~#if columns}} row-cols-1 row-cols-sm-2 row-cols-lg-{{columns~}} {{/if~}}
|
|
{{~#if class}} {{class}} {{/if}}
|
|
">
|
|
{{#each_row}}
|
|
<div class="col {{~#if class}} {{class}}{{/if}}"
|
|
{{#unless ../columns}}style="min-width: 9rem;"{{/unless}}
|
|
{{~#if id}} id="{{id}}"{{/if~}}
|
|
>
|
|
<div class="card flex-fill {{#if color}}bg-{{color}}-lt{{/if}}">
|
|
<div class="card-body d-flex flex-column">
|
|
|
|
{{#if title}}
|
|
<div class="d-flex align-items-center">
|
|
<div class="subheader text-truncate me-2">
|
|
{{#if title_link}}
|
|
<a href="{{title_link}}" class="text-decoration-none"
|
|
{{#if title_link_new_tab}}
|
|
target="_blank" rel="noopener noreferrer"
|
|
{{/if}}
|
|
>
|
|
{{title}}
|
|
</a>
|
|
{{else}}
|
|
{{title}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if dropdown_item}}
|
|
<div class="ms-auto lh-1">
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{dropdown_item.[0].label}}</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
{{#each dropdown_item}}
|
|
{{#if link}}
|
|
<a class="dropdown-item {{#if active}}active{{/if}}" href="{{link}}">{{label}}</a>
|
|
{{else}}
|
|
<span class="dropdown-item {{#if active}}active{{/if}}">{{label}}</span>
|
|
{{/if}}
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="d-flex align-items-center mt-1">
|
|
<div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate">
|
|
{{#if value_link}}
|
|
<a href="{{value_link}}"
|
|
class="text-decoration-none"
|
|
{{#if value_link_new_tab}} target="_blank" rel="noopener noreferrer"
|
|
{{/if}}
|
|
>
|
|
{{value}}{{#if unit}} {{unit}}{{/if}}
|
|
</a>
|
|
{{else}}
|
|
{{value}}{{#if unit}} {{unit}}{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if (and change_percent (not description))}}
|
|
<div class="ms-auto">
|
|
{{#if change_percent}}
|
|
<span class="text-{{#if (gte change_percent 0)}}success{{else}}danger{{/if}} d-inline-flex align-items-center lh-1">
|
|
{{change_percent}}%
|
|
{{#if (gte change_percent 0)}}
|
|
{{~icon_img 'trending-up'~}}
|
|
{{else}}
|
|
{{~icon_img 'trending-down'~}}
|
|
{{/if}}
|
|
</span>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if description}}
|
|
<div class="d-flex flex-wrap mb-2" title="{{description}}">
|
|
<div class="text-truncate me-2">{{description}}</div>
|
|
{{#if change_percent}}
|
|
<div class="ms-auto">
|
|
<span class="text-{{#if (gte change_percent 0)}}success{{else}}danger{{/if}} d-inline-flex align-items-center lh-1">
|
|
{{change_percent}}%
|
|
{{#if (gte change_percent 0)}}
|
|
{{~icon_img 'trending-up'~}}
|
|
{{else}}
|
|
{{~icon_img 'trending-down'~}}
|
|
{{/if}}
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if progress_percent}}
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar bg-{{progress_color}}" style="width: {{progress_percent}}%" role="progressbar" aria-valuenow="{{progress_percent}}" aria-valuemin="0" aria-valuemax="100" aria-label="{{progress_percent}}% Complete">
|
|
<span class="visually-hidden">{{progress_percent}}% Complete</span>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each_row}}
|
|
</div>
|