{% load dlux_tags %}
<section class="dlux-weather dlux-weather--{{ weather.variant }} no-print{% if weather.floating %} dlux-weather--floating{% endif %}{% if weather.variant == 'card' %} card border-0 shadow-sm{% endif %}"
         data-weather-widget data-weather-display="{{ weather.display }}" data-weather-corner="{{ weather.corner }}"
         data-weather-url="{{ weather.url }}" data-weather-location="{{ weather.selected }}" aria-label="{{ DLUX_STRINGS.weather_title }}">
    {% include_once 'dlux/weather/assets.html' %}
    {% if weather.variant != 'card' %}
    <button type="button"
            class="dlux-weather__trigger{% if weather.variant == 'action' %} dlux-titlebar-btn dlux-titlebar-action{% elif weather.floating %} dlux-weather__bubble{% endif %}"
            data-weather-toggle aria-expanded="false" aria-controls="{{ weather.uid }}"
            {% if weather.floating %}data-weather-draggable data-weather-drag-hint="{{ DLUX_STRINGS.weather_drag_hint|default:'Drag to move' }}"{% endif %}
            aria-label="{{ DLUX_STRINGS.weather_title }}" data-dlux-tooltip="{{ DLUX_STRINGS.weather_title }}">
        <i class="bi bi-cloud-sun" data-weather-icon aria-hidden="true"></i>
        <span class="dlux-weather__temperature" data-weather-temperature>—</span>
        <span class="dlux-weather__condition" data-weather-description>{{ DLUX_STRINGS.weather_title }}</span>
    </button>
    {% endif %}
    <div class="dlux-weather__panel{% if weather.variant == 'card' %} card-body{% endif %}" id="{{ weather.uid }}" data-weather-panel{% if weather.variant != 'card' %} hidden{% endif %}>
        {% if weather.variant == 'card' %}<h6 class="fw-bold mb-3">{{ DLUX_STRINGS.weather_title }}</h6>{% endif %}
        <div class="dlux-weather__reading">
            <i class="bi bi-cloud-sun" data-weather-icon aria-hidden="true"></i>
            <strong data-weather-temperature>—</strong>
        </div>
        <p class="dlux-weather__condition-line" data-weather-description>{{ DLUX_STRINGS.weather_loading }}</p>
        <p class="dlux-weather__feels">{{ DLUX_STRINGS.weather_feels_like }} <span data-weather-feels>—</span></p>
        <div class="dlux-weather__locations" data-weather-select role="group" aria-label="{{ DLUX_STRINGS.weather_location }}">
            {{ weather.selector }}
        </div>
        <p class="dlux-weather__status" data-weather-status role="status">{{ DLUX_STRINGS.weather_loading }}</p>
        <a class="dlux-weather__attribution" href="https://openweathermap.org/" target="_blank" rel="noopener noreferrer">{{ DLUX_STRINGS.weather_attribution }}</a>
    </div>
</section>