<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE menuplugin SYSTEM "../../../dtd/displaymenuplugin.dtd">

<menuplugin x="0" y="0" width="100%" height="100%" fadetime="0">
   <background>
        <area x="0" y="0" width="100%" height="100%" layer="1">
            <fill color="{clrTransBlack}" />
            <drawrectangle x="0" y="0" width="100%" height="10%" color="{clrBackground}" />
        </area>
        <area x="0" y="0" width="100%" height="10%" layer="2">
            <drawimage imagetype="skinpart" path="headertop" x="0" y="0" width="100%" height="100%"/>
        </area>
    </background>
    <scrollbar>
        <area x="97%" y="25%" width="2%" height="60%" layer="2">
            <fill color="{clrBorder}" />
            <drawrectangle x="2" y="2" width="{areawidth} - 4" height="{areaheight} - 4" color="{clrTransparent}" />
            <drawrectangle x="4" y="4 + {areaheight} * {offset} / 1000" width="{areawidth} - 8" height="{areaheight} * {height} / 1000 - 8" color="{clrProgressbar}" />
        </area>
    </scrollbar>

    <!-- Available Variables in detailheader and tab:
    {summary}                           short summary of weather
    {icon}                              path to use in <drawimage> to display appropriate weather icon
    {city}                              configured city to display weather for
    {latitude}                          latitude
    {longitude}                         longitude

    {hourly[]}                          array with up to 48 hourly forecasts
    {hourly[num]}                       number of forecast, starting at 1
    {hourly[timestamp]}                 timestamp in hh:mm
    {hourly[temperature]}               temperature in °C
    {hourly[apparenttemperature]}       apparent (felt) temperature in °C
    {hourly[summary]}                   short summary
    {hourly[icon]}                      path to use in <drawimage> to display appropriate weather icon
    {hourly[precipitationintensity]}    precipitation intensity in l/qm    
    {hourly[precipitationprobability]}  precipitation probability in %
    {hourly[precipitationtype]}         precipitation type (snow, ...)
    {hourly[humidity]}                  humidity in %
    {hourly[windspeed]}                 wind speed in km/h
    {hourly[windbearing]}               wind bearing in degrees
    {hourly[windbearingstring]}         wind bearing as human readable string (e.g NE, NNE, ...)
    {hourly[visibility]}                visibility in km
    {hourly[cloudcover]}                cloud cover in %
    {hourly[pressure]}                  pressure in HPa
    {hourly[ozone]}                     Ozone in DU (Dobson Unit)
    -->
    <detailheader>
        <area x="1%" y="10%" width="98%" height="15%" layer="2">
            <fill color="{clrTransBlack}" />
        </area>
        <area x="1%" y="10%" width="97%" height="15%" layer="3">
            <drawimage name="weathericon" imagetype="icon" path="{icon}" align="right" valign="center" width="{areaheight}*0.7" height="70%"/>
            <drawtextbox x="2%" y="15%" width="80%" maxlines="2" font="{semibold}" fontsize="35%" color="{clrWhite}" text="{summary}" />
        </area>
    </detailheader>

    <tab name="current" x="2%" y="25%" width="94%" height="60%" layer="2" scrollheight="{areaheight}/4">
        <loop name="hourly" x="0" y="1%" orientation="vertical" columnwidth="{areawidth}" rowheight="{areaheight}/5">
            <drawtext x="0" font="{semibold}" fontsize="9%" valign="center" color="{clrWhite}" text="{hourly[timestamp]}" />
            <drawimage imagetype="icon" path="{hourly[icon]}" x="{rowheight}*1.2" valign="center" width="{rowheight}*0.8" height="{rowheight}*0.8"/>
            <drawtext name="temp" x="2.2*{rowheight} + 0.75*{rowheight} - {width(temp)}/2" font="{vdrOsd}" fontsize="11%" y="0" color="{clrWhite}" text="{hourly[temperature]}°C" />
            <drawtext name="felt" x="2.2*{rowheight} + 0.75*{rowheight} - {width(felt)}/2" font="{vdrOsd}" fontsize="5%" y="{rowheight}*0.6" color="{clrWhite}" text="{tr(felt)} {hourly[apparenttemperature]}°C" />
            <drawtext x="4.2*{rowheight}" font="{vdrOsd}" fontsize="{rowheight}/3-2" y="0" width="{columnwidth} - 4*{rowheight}" color="{clrWhite}" text="{hourly[summary]}" />
            <drawtext x="4.2*{rowheight}" font="{vdrOsd}" fontsize="{rowheight}/3-2" y="{rowheight}/3" width="{columnwidth} - 4*{rowheight}" color="{clrWhite}" text="{tr(precipitationprobability)} {hourly[precipitationprobability]}%, {hourly[precipitationintensity]} l/qm" />
            <drawtext x="4.2*{rowheight}" font="{vdrOsd}" fontsize="{rowheight}/3-2" y="{rowheight}*2/3" width="{columnwidth} - 4*{rowheight}" color="{clrWhite}" text="{tr(windspeed)} {hourly[windspeed]} km/h {tr(from)} {hourly[windbearingstring]}" />
            <drawrectangle x="0" y="{rowheight} - 1" width="{columnwidth}" height="1" color="{clrWhite}" />
        </loop>
    </tab>
</menuplugin>
