aero_weather-1.0.3/templates/aero-weather-horizontal-block.html.twig

{#
/**
 * @file
 * Default theme implementation for the Aero Weather block.
 *
 * This template renders the weather dashboard, displaying current weather conditions,
 * metrics, and forecast details.
 *
 * Variables expected from the controller or preprocess:
 * - weather_data.location.name: The name of the location (e.g., city name).
 * - weather_data.location.localtime: The local time at the location.
 * - weather_data.current.temp_c: The current temperature in Celsius.
 * - weather_data.current.temp_f: The current temperature in Fahrenheit.
 * - weather_data.current.humidity: The current humidity percentage.
 * - weather_data.current.cloud: The current cloud cover percentage.
 * - weather_data.current.uv: The current UV index.
 * - weather_data.current.vis_km: The current visibility in kilometers.
 * - weather_data.current.gust_kph: The current wind gust speed in kilometers per hour.
 * - weather_data.current.wind_dir: The direction of the current wind.
 * - weather_data.current.pressure_mb: The current atmospheric pressure in hPa.
 * - weather_data.current.precip_mm: The current precipitation in millimeters.
 * - weather_data.current.condition.icon: The icon representing the current weather condition.
 * - weather_data.forecast.forecastday[]: An array of forecast data for multiple days.
 *    Each entry contains weather information for a particular day (e.g., date, max temp, icon).
 *
 * The template includes:
 * - Current weather data with temperature and weather icon.
 * - Detailed weather metrics (UV Index, Precipitation, Cloud Coverage, Visibility, etc.)
 * - A swiper (carousel) for weather metrics.
 * - A forecast swiper with weather icons and temperatures for the next days.
 *
 * Additionally, it supports a dynamic layout based on the provided configuration settings:
 * - config.layout: The layout style for the weather card.
 * - config.color_palette: Color scheme for the card.
 * - config.round_border: Whether the card has rounded corners.
 * - config.uuid: A unique identifier for the weather card.
 * - config.background_image_url: Background image for the weather card (if provided).
 * - config.formatted_date: The formatted date for the location's current time.
 * - config.icon_settings: A configuration for the icons to be displayed for different weather metrics.
 *
 * The template also includes a conditional display for different weather metrics
 * and dynamic rendering of forecast information.
 */
#}
{% if weather_data %}
  {% set dynamic_classes = [
    config.layout,
    config.color_palette,
    config.round_border ? 'round-border' : '',
    config.background_image_url ? 'has-bg-image' : '',
    config.uuid
  ] %}
  <div class="weather-card-horizontal {{ dynamic_classes|join(' ') }}"
       data-id="{{ config.uuid }}"
        {% if config.background_image_url %}
         style="background-image: url('{{ config.background_image_url|escape('html_attr') }}'); background-size: cover; background-position: center;"
       {% endif %}>
    <div class="left-section">
      <div class="location-info">
        <div class="location-name">{{ weather_data.location.name }}</div>
        <div class="current-time-date">
          {{ config.formatted_date }}
        </div>
      </div>

      <div class="current-temp-and-icon">
        <div class="current-temp">
          <div class="temp-c">{{ weather_data.current.temp_c|round }}</div>
          <div class="temp-f hidden">{{ weather_data.current.temp_f|round }}</div>
        </div>
        <div class="temp-units">
          <span class="temp-c-switch font-bold">°C</span>
          <span class="temp-f-switch opacity-70">°F</span>
        </div>
        <img src="https:{{ weather_data.current.condition.icon|escape('html_attr') }}" alt="Weather Icon" class="current-icon">
      </div>
    </div>

    <div class="middle-section">
      <div class="swiper swiper-detailed-metrics">
        <div class="swiper-wrapper">

          {% if config.icon_settings.uv_index is defined and weather_data.current.uv is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/uv-index.html.twig' with { icon_config: config.icon_settings.uv_index } %}
            <div class="metric-label">{{ 'UV Index'|trans }}</div>
            <div class="metric-value">{{ weather_data.current.uv|default('N/A') }}</div>
          </div>
          {% endif %}

          {% if config.icon_settings.precipitation is defined and weather_data.current.precip_mm is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/precipitation.html.twig' with { icon_config: config.icon_settings.precipitation } %}
            <div class="metric-label">{{ 'Precipitation'|trans }}</div>
            <div class="metric-value">{{ weather_data.current.precip_mm|default('N/A') }} mm</div>
          </div>
          {% endif %}

          {% if config.icon_settings.clouds is defined and weather_data.current.cloud is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/clouds.html.twig' with { icon_config: config.icon_settings.clouds } %}
            <div class="metric-label">{{ 'Clouds'|trans }}</div>
            <div class="metric-value">{{ weather_data.current.cloud|default('N/A') }}%</div>
          </div>
          {% endif %}

          {% if config.icon_settings.visibility is defined and weather_data.current.vis_km is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/visibility.html.twig' with { icon_config: config.icon_settings.visibility } %}
            <div class="metric-label">{{ 'Visibility'|trans }}</div>
            <div class="metric-value">{{ weather_data.current.vis_km|default('N/A') }} km</div>
          </div>
          {% endif %}

          {% set astro = weather_data.forecast.forecastday[0].astro|default({}) %}
          {% if config.icon_settings.sunrise is defined and astro.sunrise is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/sunrise.html.twig' with { icon_config: config.icon_settings.sunrise } %}
            <div class="metric-label">{{ 'Sunrise'|trans }}</div>
            <div class="metric-value">{{ astro.sunrise|default('N/A') }}</div>
          </div>
          {% endif %}

          {% if config.icon_settings.sunset is defined and astro.sunset is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/sunset.html.twig' with { icon_config: config.icon_settings.sunset } %}
            <div class="metric-label">{{ 'Sunset'|trans }}</div>
            <div class="metric-value">{{ astro.sunset|default('N/A') }}</div>
          </div>
          {% endif %}

          {% if config.icon_settings.humidity is defined and weather_data.current.humidity is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/humidity.html.twig' with { icon_config: config.icon_settings.humidity } %}
            <div class="metric-label">{{ 'Humidity'|trans }}</div>
            <div class="metric-value">{{ weather_data.current.humidity|default('N/A') }}%</div>
          </div>
          {% endif %}

          {% if config.icon_settings.pressure is defined and weather_data.current.pressure_mb is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/pressure.html.twig' with { icon_config: config.icon_settings.pressure } %}
            <div class="metric-label">{{ 'Pressure'|trans }}</div>
            <div class="metric-value">{{ weather_data.current.pressure_mb|default('N/A') }} hPa</div>
          </div>
          {% endif %}

          {% if config.icon_settings.wind is defined and weather_data.current.gust_kph is defined and weather_data.current.wind_dir is defined %}
          <div class="swiper-slide metric-item">
            {% include '@aero_weather/templates/icons/wind.html.twig' with { icon_config: config.icon_settings.wind } %}
            <div class="metric-label">{{ 'Wind'|trans }}</div>
            <div class="metric-value">
              {{ weather_data.current.gust_kph|round|default('N/A') }} km/h {{ weather_data.current.wind_dir|default('') }}
            </div>
          </div>
          {% endif %}

        </div>
      </div>
    </div>

    {% set forecast_days = weather_data.forecast.forecastday %}
    {% if forecast_days is not empty %}
      <div class="forecast-list-container">
        <div class="swiper swiper-forecast">
          <div class="swiper-wrapper">
            {% for day in forecast_days %}
              {% if day.day.maxtemp_c > 10 %}
                <div class="swiper-slide forecast-item">
                  <div class="forecast-day">
                    {% if loop.first %}
                      {{ 'Today'|trans }}
                    {% elseif loop.index == 2 %}
                      {{ 'Tomorrow'|trans }}
                    {% else %}
                      {{ day.date|date("D") }}
                    {% endif %}
                  </div>

                  <div class="forecast-wrapper">
                    {% if day.day.condition.icon is not empty %}
                      <img 
                        src="https:{{ day.day.condition.icon|escape('html_attr') }}" 
                        alt="{{ day.day.condition.text|default('Weather')|escape('html_attr') }}" 
                        class="forecast-icon"
                      >
                    {% endif %}
                    <div class="forecast-temp">
                      <div class="temp-c">{{ day.day.maxtemp_c|round }}°</div>
                      <div class="temp-f hidden">{{ day.day.maxtemp_f|round }}°</div>
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}