<?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>
        <!-- background left Menu -->
        <area x="0" y="0" width="50%" height="100%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
        <!-- background right detail view -->
        <area x="50%" y="3%" width="50%" height="94%" layer="1">
            <fill color="{clrTransBlueLight}" />
        </area>
    </background>
    <!-- Available Variables header:
    {title}                         title of current menu
    {vdrversion}                    running VDR Version
    {hasicon}                       true if a menu icon is available
    {icon}                          path of menu icon
    -->
    <header>
        <area x="0" y="0" width="50%" height="10%" layer="2">
            <drawtext condition="not{hasicon}" x="5" width="{areawidth}-10" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{title}" />
            <drawimage condition="{hasicon}" name="menuicon" imagetype="menuicon" path="{icon}" x="5" valign="center" width="{areaheight}*8/10" height="80%"/>
            <drawtext condition="{hasicon}" x="{areaheight}" valign="center" width="{areawidth}-{areaheight}-10" font="{light}" fontsize="80%" color="{clrWhite}" text="{title}" />
        </area>
    </header>

    <datetime>
        <area x="0" y="0" width="1" height="1" layer="1">
            <fill color="{clrTransparent}" />
        </area>
    </datetime>

    <colorbuttons>
        <area x="0" y="0" width="1" height="1" layer="1">
            <fill color="{clrTransparent}" />
        </area>
    </colorbuttons>

    <menuitems x="0" y="10%" orientation="vertical" width="100%" height="82%" align="center" numlistelements="10">
        <!-- Available Variables:
        {current}
        {menuitemtext}                      "Current Weather", "Next 48 hours" or "Next 7 days"
        {iscurrent}                         true if item is "Current Weather"
        {ishourly}                          true if item is "Next 48 hours"
        {isdaily}                           true if item is "Next 7 days"
        {city}                              configured city to display weather for
        {latitude}                          latitude
        {longitude}                         longitude
        
        If {iscurrent} is true, the following tokens are set:
        {timestamp}                         timestamp in hh:mm dd.mm of current forecast
        {temperature}                       current temperature in °C
        {apparenttemperature}               apparent (felt) temperature in °C
        {summary}                           short summary of current weather
        {icon}                              path to use in <drawimage> to display appropriate weather icon
        {precipitationintensity}            precipitation intensity in l/qm    
        {precipitationprobability}          precipitation probability in %
        {precipitationtype}                 precipitation type (snow, ...)
        {humidity}                          humidity in %
        {windspeed}                         wind speed in km/h
        {windbearing}                       wind bearing in degrees
        {windbearingstring}                 wind bearing as human readable string (e.g NE, NNE, ...)
        {visibility}                        visibility in km
        {cloudcover}                        cloud cover in %
        {pressure}                          pressure in HPa
        {ozone}                             Ozone in DU (Dobson Unit)

        If {ishourly} is true, the following tokens are set:
        {summary}                           short summary of weather
        {icon}                              path to use in <drawimage> to display appropriate weather icon

        {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)

        If {isdaily} is true, the following tokens are set:
        {summary}                           short summary of weather
        {icon}                              path to use in <drawimage> to display appropriate weather icon

        {daily[day]}                        day of forecast in dd.mm
        {daily[dayname]}                    three letter abbrivated day name
        {daily[temperaturemin]}             minimum temperature at this day in °C
        {daily[temperaturemintime]}         time of minimum temperature
        {daily[temperaturemax]}             maximum temperature at this day in °C
        {daily[temperaturemaxtime]}         time of maximum temperature
        {daily[summary]}                    short summary
        {daily[icon]}                       path to use in <drawimage> to display appropriate weather icon
        {daily[precipitationintensity]}     precipitation intensity in l/qm    
        {daily[precipitationprobability]}   precipitation probability in %
        {daily[precipitationtype]}          precipitation type (snow, ...)
        {daily[humidity]}                   humidity in %
        {daily[windspeed]}                  wind speed in km/h
        {daily[windbearing]}                wind bearing in degrees
        {daily[windbearingstring]}          wind bearing as human readable string (e.g NE, NNE, ...)
        {daily[visibility]}                 visibility in km
        {daily[cloudcover]}                 cloud cover in %
        {daily[pressure]}                   pressure in HPa
        {daily[ozone]}                      Ozone in DU (Dobson Unit)
        -->
        <listelement>
            <!-- Background -->
            <area x="1%" width="46%" layer="2">
                <fill condition="not{current}" color="{clrTransparent}" />
                <fill condition="{current}" color="{clrTransBlueLight}" />
            </area>
            <area x="1%" width="46%" layer="3">
                <drawtext x="10" valign="center" font="{light}" fontsize="95%" color="{clrWhite}" text="{menuitemtext}" />
            </area>
        </listelement>
        <!-- additional element which is drawn for current element -->
        <!-- All Tokens from listelement are available -->
        <currentelement delay="100" fadetime="0">
            <area condition="{iscurrent}" x="51%" y="0" width="48%" height="100%" layer="3">
                <drawimage name="weathericon" imagetype="icon" path="{icon}" x="2%" y="0" width="{areawidth}*0.3" height="{areawidth}*0.3"/>
                <drawtext align="right" y="0" font="{semibold}" fontsize="8%" color="{clrWhite}" text="{city}" />
                <drawtext align="right" y="7%" font="{light}" fontsize="8%" color="{clrWhite}" text="{timestamp}" />
                <drawtext align="right" y="13%" font="{light}" fontsize="18%" color="{clrWhite}" text="{temperature}°C" />
                <drawtext align="right" y="28%" font="{light}" fontsize="8%" color="{clrWhite}" text="{summary}" />
                <drawtext x="0" y="40%" font="{light}" fontsize="6%" color="{clrWhite}" text="{tr(apparenttemp)}: {apparenttemperature} °C" />
                <drawtext x="0" y="46%" font="{light}" fontsize="6%" color="{clrWhite}" text="{tr(precipitationprobability)}: {precipitationprobability} %" />
                <drawtext x="0" y="52%" font="{light}" fontsize="6%" color="{clrWhite}" text="{tr(precipitationintensity)}: {precipitationintensity} l/qm" />
                <drawtext x="0" y="58%" font="{light}" fontsize="6%" color="{clrWhite}" text="{tr(humidity)}: {humidity} %" />
                <drawtext x="0" y="64%" font="{light}" fontsize="6%" color="{clrWhite}" text="{tr(windspeed)}: {windspeed} km/h" />
                <drawtext x="0" y="70%" font="{light}" fontsize="6%" color="{clrWhite}" text="{tr(windbearing)}: {windbearingstring}  ({windbearing} °)" />
                <drawtext x="0" y="76%" font="{light}" fontsize="6%" color="{clrWhite}" text="{tr(cloudcover)}: {cloudcover} %" />
            </area>
            <area condition="{ishourly}" x="51%" y="0" width="48%" height="100%" layer="3">
                <loop name="hourly" x="0" y="0" orientation="vertical" columnwidth="{areawidth}" rowheight="{areaheight}/12" overflow="cut">
                    <drawtext x="0" font="{semibold}" fontsize="7%" valign="center" color="{clrWhite}" text="{hourly[timestamp]}" />
                    <drawimage imagetype="icon" path="{hourly[icon]}" x="18%" valign="center" width="{rowheight}*0.8" height="{rowheight}*0.8"/>
                    <drawtext x="30%" font="{light}" fontsize="7%" valign="center" color="{clrWhite}" text="{hourly[temperature]}°C" />
                    <drawtext x="48%" font="{light}" fontsize="5%" valign="center" width="52%" color="{clrWhite}" text="{hourly[summary]}" />
                    <drawrectangle x="0" y="{rowheight} - 1" width="{columnwidth}" height="1" color="{clrWhite}" />
                </loop>
            </area>
            <area condition="{isdaily}" x="51%" y="0" width="48%" height="100%" layer="3">
                <loop name="daily" x="0" y="0" orientation="vertical" columnwidth="{areawidth}" rowheight="{areaheight}/7" overflow="cut">
                    <drawtext x="0" font="{semibold}" fontsize="{rowheight}/2" y="5" color="{clrWhite}" text="{daily[dayname]} {daily[day]}" />
                    <drawtext x="35%" font="{light}" fontsize="{rowheight}/2" y="5" color="{clrWhite}" text="{daily[temperaturemin]}°C - {daily[temperaturemax]}°C" />
                    <drawtext x="0" font="{light}" fontsize="{rowheight}*0.3" width="{columnwidth} - {rowheight}*0.7" y="{rowheight}*0.6" color="{clrWhite}" text="{daily[summary]}" />
                    <drawimage imagetype="icon" path="{daily[icon]}" x="{columnwidth} - {rowheight}*0.7" valign="center" width="{rowheight}*0.7" height="{rowheight}*0.7"/>
                    <drawrectangle x="0" y="{rowheight} - 1" width="{columnwidth}" height="1" color="{clrWhite}" />
                </loop>
            </area>
        </currentelement>
    </menuitems>
</menuplugin>
