{% import "macros/dashboard_widget_info.html" as dw_info %}
{% set span = tile.span | default(value="1") %}
{% set th = tile.thresholds | default(value=false) %}
<div class="dashboard-tile span-{{ span }}{% if tile.type == "chart" %} dashboard-tile-chart{% endif %}{% if tile.status %} status-{{ tile.status }}{% endif %}"
     data-widget-id="{{ tile.id }}"
     data-span="{{ span }}"
     data-widget-type="{{ tile.type }}"
     data-zone="{{ tile.zone | default(value="metrics") }}"
     data-manifest-label="{{ tile.manifest_label | default(value=tile.label) }}"
     {% if th %}data-thresholds="{{ th | json_encode | escape }}"{% endif %}>
    <div class="dashboard-tile-edit">
        <button type="button" class="dashboard-tile-handle blocks-icon-button" title="Drag or use arrow keys to move" aria-label="Move widget with arrow keys" aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight">
            <i class="fas fa-grip-vertical"></i>
        </button>
        <div class="dashboard-tile-span-controls" role="group" aria-label="Tile size">
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm dashboard-span-btn{% if span == "1" %} active{% endif %}" data-span="1" title="Compact">1</button>
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm dashboard-span-btn{% if span == "2" %} active{% endif %}" data-span="2" title="Wide">2</button>
            <button type="button" class="blocks-button blocks-button-secondary blocks-button-sm dashboard-span-btn{% if span == "full" %} active{% endif %}" data-span="full" title="Full width">Full</button>
        </div>
        {% if tile.type != "chart" %}
        <button type="button" class="dashboard-threshold-toggle blocks-icon-button" title="Green / yellow / red thresholds" aria-label="Configure traffic-light thresholds" aria-expanded="false">
            <i class="fas fa-traffic-light"></i>
        </button>
        {% endif %}
        <button type="button" class="dashboard-tile-remove blocks-icon-button blocks-icon-button-danger" title="Remove widget" aria-label="Remove widget" onclick="removeDashboardTile(this)">
            <i class="fas fa-times"></i>
        </button>
    </div>
    {% if tile.type != "chart" %}
    <div class="dashboard-threshold-panel hidden">
        <label class="dashboard-threshold-row">
            <input type="checkbox" class="dashboard-threshold-enabled"{% if th and th.enabled %} checked{% endif %}>
            <span>Enable traffic-light colors</span>
        </label>
        <div class="dashboard-threshold-fields">
            <label class="dashboard-threshold-field">
                <span class="dashboard-threshold-label">Direction</span>
                <select class="dashboard-threshold-direction blocks-input">
                    <option value="higher_better"{% if not th or th.direction != "lower_better" %} selected{% endif %}>Higher is better</option>
                    <option value="lower_better"{% if th and th.direction == "lower_better" %} selected{% endif %}>Lower is better</option>
                </select>
            </label>
            <label class="dashboard-threshold-field">
                <span class="dashboard-threshold-label">Green at</span>
                <input type="number" class="dashboard-threshold-green blocks-input" step="any" value="{% if th and th.green is defined %}{{ th.green }}{% endif %}">
            </label>
            <label class="dashboard-threshold-field">
                <span class="dashboard-threshold-label">Yellow at</span>
                <input type="number" class="dashboard-threshold-yellow blocks-input" step="any" value="{% if th and th.yellow is defined %}{{ th.yellow }}{% endif %}">
            </label>
        </div>
        <div class="dashboard-threshold-footer">
            <span class="dashboard-threshold-preview" aria-hidden="true"></span>
            <span class="dashboard-threshold-error hidden"></span>
        </div>
    </div>
    {% endif %}
    <div class="dashboard-tile-body">
        {% if tile.type == "chart" %}
        <div class="widget-chart-card widget-mini-card" data-widget-chart data-widget-id="{{ tile.id }}">
            <template class="dashboard-chart-json">{{ tile.chart_payload | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</template>
            <div class="dashboard-tile-title-row">
                <i class="{{ tile.icon | default(value='fas fa-chart-bar') }} dashboard-tile-icon" aria-hidden="true"></i>
                <div class="dashboard-tile-title widget-mini-label widget-chart-title" contenteditable="false">{{ tile.title }}</div>
                {{ dw_info::info(description=tile.description | default(value="")) }}
            </div>
            <div class="widget-chart-error text-danger small" hidden></div>
            <div class="widget-chart-canvas-wrap">
                <canvas role="img" aria-label="{{ tile.title }}"></canvas>
            </div>
        </div>
        {% else %}
        <div class="widget-mini-card dashboard-tile-number">
            <div class="dashboard-widget-value-row">
                <i class="{{ tile.icon | default(value='fas fa-chart-bar') }} dashboard-tile-icon" aria-hidden="true"></i>
                <div class="widget-mini-value{% if tile.status %} dashboard-value-status-{{ tile.status }}{% endif %}"{% if tile.status %} data-status="{{ tile.status }}"{% endif %}>{{ tile.value }}</div>
            </div>
            <div class="dashboard-tile-title-row">
                <div class="dashboard-tile-title widget-mini-label" contenteditable="false">{{ tile.title }}</div>
                {{ dw_info::info(description=tile.description | default(value="")) }}
            </div>
        </div>
        {% endif %}
        <div class="dashboard-tile-plugin text-muted small">{{ tile.plugin_name }}</div>
    </div>
</div>