<menumain x="0" y="0" width="100%" height="100%" fadetime="0">
    <!-- 
    static content of main menu, is only drawn once at main menu startup
    -->
    <background>
        <!-- main menu background -->
        <area x="0" y="0" width="71%" height="70%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
        <!-- datetime background -->
        <area x="75%" y="0" width="25%" height="10%" layer="2">
            <drawrectangle x="0" y="0" width="53%" height="100%" color="{clrTransBlueLight}" />
            <drawrectangle x="53%" y="0" width="47%" height="100%" color="{clrTransBlack}" />
        </area>
    </background>
    <!-- Available Variables header:
    {title}                   title of current menu
    {vdrversion}              running VDR Version
    -->
    <header>
        <area x="0" y="0" width="70%" height="7%" layer="2">
            <drawtext x="10" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="{title} {vdrversion}" />
        </area>
    </header>
    <!-- Available Variables datetime:
    {time}                              time in hh:mm
    {day}                               day in digits
    {dayleadingzero}                    day in digits with leading 0
    {dayname}                           Full name of the day
    {daynameshort}                      Short 3 char name of the day
    {month}                             month in digits with leading 0
    {monthname}                         Full name of the month
    {monthnameshort}                    3 letter abbrivation of month name  
    {year}                              year in yyyy
    -->
    <datetime>
        <area x="75%" y="0" width="13%" height="10%" layer="3">
            <drawtext align="right" y="0%" font="{light}" fontsize="55%" color="{clrWhite}" text="{dayname}" />
            <drawtext align="right" y="45%" font="{light}" fontsize="55%" color="{clrWhite}" text="{day}. {monthnameshort}" />
        </area>
        <area x="88%" y="0" width="12%" height="10%" layer="3">
            <drawtext align="center" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="{time}" />
        </area>
    </datetime>

    <!-- Available Variables colorbuttons:
    {red1}                    true if red button is button 1
    {red2}                    true if red button is button 2
    {red3}                    true if red button is button 3
    {red4}                    true if red button is button 4
    {green1}                  true if green button is button 1
    {green2}                  true if green button is button 2
    {green3}                  true if green button is button 3
    {green4}                  true if green button is button 4
    {yellow1}                 true if yellow button is button 1
    {yellow2}                 true if yellow button is button 2
    {yellow3}                 true if yellow button is button 3
    {yellow4}                 true if yellow button is button 4
    {blue1}                   true if blue button is button 1
    {blue2}                   true if blue button is button 2
    {blue3}                   true if blue button is button 3
    {blue4}                   true if blue button is button 4
    {red}                     label of red button
    {green}                   label of green button
    {yellow}                  label of yellow button
    {blue}                    label of blue button
    -->
    <colorbuttons>
        <area x="0" y="63%" width="18%" height="7%" layer="2">
            <drawtext condition="{red1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red1}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green1}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow1}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue1}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue1}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="18%" y="63%" width="17%" height="7%" layer="2">
            <drawtext condition="{red2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red2}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green2}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow2}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue2}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue2}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="35%" y="63%" width="18%" height="7%" layer="2">
            <drawtext condition="{red3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red3}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green3}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow3}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue3}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue3}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
        <area x="53%" y="63%" width="17%" height="7%" layer="2">
            <drawtext condition="{red4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{red}" />
            <drawrectangle condition="{red4}" x="0" y="0" width="10" height="100%" color="{clrRed}" />
            <drawtext condition="{green4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{green}" />
            <drawrectangle condition="{green4}" x="0" y="0" width="10" height="100%" color="{clrGreen}" />
            <drawtext condition="{yellow4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{yellow}" />
            <drawrectangle condition="{yellow4}" x="0" y="0" width="10" height="100%" color="{clrYellow}" />
            <drawtext condition="{blue4}" x="20" valign="center" font="{light}" fontsize="80%" color="{clrWhite}" text="{blue}" />
            <drawrectangle condition="{blue4}" x="0" y="0" width="10" height="100%" color="{clrBlue}" />
        </area>
    </colorbuttons>
    <!-- Available Variables timers:
    {numtimers}                  number of active timers (max. 15 timers will be displayed)
    {numtimerconflicts}          number of current timer conflicts

    {timers[]}                   array with active timers (local and remote if remotetimers plugin is in use)
    {timers[title]}              title of timer
    {timers[datetime]}           date and time of timer
    {timers[recording]}          true if timer is recording currently
    {timers[channelname]}        name of channel for which timer is created
    {timers[channelnumber]}      number of channel
    {timers[channelid]}          ChannelID of channel
    {timers[channellogoexists]}  true if channel logo exists
    -->
    <timers>
        <area x="0" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}" />
        </area>
        <area condition="not{numtimerconflicts}" x="0" y="75%" width="{areawidth}/8 - 5" height="25%" layer="2">
            <drawtext align="center" y="15%" font="{light}" fontsize="50%" color="{clrWhite}" text="{numtimers}" />
            <drawtext condition="eq({numtimers}, 0)||gt({numtimers}, 1)" name="timersheader" align="center" y="60%" font="{light}" fontsize="20%" color="{clrWhite}" text="{tr(activetimers)}" />
            <drawtext condition="eq({numtimers}, 1)" name="timersheader" align="center" y="60%" font="{light}" fontsize="20%" color="{clrWhite}" text="{tr(activetimer)}" />
        </area>
        <area condition="{numtimerconflicts}" x="0" y="75%" width="{areawidth}/8 - 5" height="25%" layer="2">
            <drawtext align="center" y="0" font="{light}" fontsize="50%" color="{clrWhite}" text="{numtimers}" />
            <drawtext name="timersheader" align="center" y="45%" font="{light}" fontsize="20%" color="{clrWhite}" text="{tr(activetimers)}" />
            <drawtext align="center" y="65%" font="{semibold}" fontsize="20%" color="{clrRed}" text="{numtimerconflicts} {tr(conflicts)}!" />
        </area>
        
        <area condition="gt({numtimers}, 0)" x="{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 1)" x="2*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 2)" x="3*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 3)" x="4*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 4)" x="5*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 5)" x="6*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area condition="gt({numtimers}, 6)" x="7*{areawidth}/8" y="75%" width="{areawidth}/8 - 5" height="25%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area x="{areawidth}/8" y="75%" width="{areawidth}*0.875" height="25%" layer="2">
            <loop name="timers" x="0" y="0" orientation="horizontal" columnwidth="{areawidth}/7" rowheight="{areaheight}" overflow="cut">
                <drawrectangle condition="{timers[recording]}" x="0" y="0" width="{columnwidth}-5" height="{rowheight}" color="{clrRed}" />
                <drawimage  cache="true" name="logo" imagetype="channellogo" path="{timers[channelid]}" width="{columnwidth}-15" height="40%" align="center" y="10" />
                <drawtextbox x="5" y="{height(logo)} + 10" width="{columnwidth}-10" align="center" maxlines="2" font="{light}" fontsize="15%" color="{clrWhite}" text="{timers[title]}" />
                <drawtext align="center" y="75%" font="{light}" fontsize="20%" color="{clrWhite}" text="{timers[datetime]}" />
            </loop>
        </area>
    </timers>

    <!-- Available Variables discusage:
    {freetime}                available disc capacity in hh:mm
    {freepercent}             available disc capacity in percent
    {usedpercent}             used disc capacity in percent
    {freegb}                  available disc capacity in gigabytes
    {discalert}               true if disc usage is > 95%
    {vdrusagestring}          localized VDR internal usage string
    -->
    <discusage>
        <area x="75%" y="26%" width="25%" height="10%" layer="1">
            <fill condition="not{discalert}" color="{clrTransBlack}"/>
            <fill condition="{discalert}" color="{clrRed}"/>
        </area>
        <area x="75%" y="26%" width="25%" height="10%" layer="2">
            <drawimage imagetype="icon" path="ico_discusage" x="1%" valign="center" width="{areaheight}*0.9" height="{areaheight}*0.9"/>
            <drawtext x="{areaheight}+10" y="0" font="{light}" fontsize="55%" color="{clrWhite}" text="{tr(disc)}: {freepercent}% {tr(free)}" />
            <drawtext x="{areaheight}+10" y="45%" font="{light}" fontsize="55%" color="{clrWhite}" text="{freetime} {tr(hours)}" />
        </area>
    </discusage>

    <!-- Available Variables currentweather:
    {timestamp}                 timestamp of forecast in dd.mm hh:mm
    {temperature}               current temperature in °C
    {apparenttemperature}       apparent (feeled) temperature
    {mintemperature}            minimum daily temperature in °C
    {maxtemperature}            maximum daily temperature in °C
    {summary}                   short weather summary
    {icon}                      weather icon 
    {precipitationintensity}    precipitation intensity in l/m2
    {precipitationprobability}  precipitation probability in %
    {precipitationtype}         precipitation type
    {humidity}                  humidity in %
    {windspeed}                 windspeed in km/h
    {windbearing}               wind bearing in °
    {windbearingstring}         wind bearing (N, NE, ...)
    {visibility}                visibility in km
    {cloudcover}                cloud cover in %
    {pressure}                  pressure in HPo
    {ozone}                     ozone value in DU
    -->
    <currentweather>
        <area x="75%" y="13%" width="25%" height="10%" layer="2">
            <drawrectangle x="0" y="0" width="53%" height="100%" color="{clrTransBlueLight}" />
            <drawrectangle x="53%" y="0" width="47%" height="100%" color="{clrTransBlack}" />
        </area>
        <area x="75%" y="13%" width="12%" height="10%" layer="2">
            <drawimage imagetype="icon" path="{icon}" align="center" valign="center" width="{areaheight}*0.9" height="{areaheight}*0.9"/>
        </area>
        <area x="89%" y="13%" width="10%" height="10%" layer="2">
            <drawtext x="0" y="0" font="{light}" fontsize="25%" color="{clrWhite}" text="{mintemperature}°C" />
            <drawtext x="0" y="75%" font="{light}" fontsize="25%" color="{clrWhite}" text="{maxtemperature}°C" />
        </area>
        <area x="89%" y="13%" width="10%" height="10%" layer="3">
            <drawtext align="right" valign="center" font="{light}" fontsize="60%" color="{clrWhite}" text="{temperature}°C" />
        </area>
    </currentweather>

    <!-- Available Variables devices:
    {numdevices}                number of available devices
    {devices[]}                 array with available devices
    {devices[num]}              number of current device
    {devices[type]}             type of device (DVB-S, DVB-C, ...)
    {devices[istuned]}          true if device is currently tuned to a transponder
    {devices[livetv]}           true if device is currently playing livetv
    {devices[recording]}        true if device is currently recording
    {devices[hascam]}           true if device has a CAM
    {devices[cam]}              number of CAM
    {devices[signalstrength]}   signalstrength of devcie
    {devices[signalquality]}    signalstrength of devcie
    {devices[channelnumber]}    number of the currently tuned channel
    {devices[channelname]}      name of the currently tuned channel
    {devices[channelid]}        ID of the currently tuned channel
    {devices[source]}           source of the currently tuned channel
    -->
    <devices>
        <area x="75%" y="48%" width="25%" height="{areaheight}/12 * {numdevices}" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area x="75%" y="48%" width="25%" height="{areaheight}/12 * {numdevices}" layer="2">
            <loop name="devices" x="0" y="0" orientation="vertical" columnwidth="{areawidth}" rowheight="{areaheight} / {numdevices}" overflow="cut">
                <drawtext name="label" x="5" y="0" font="{light}" fontsize="{rowheight}*0.4" color="{clrWhite}" text="{devices[num]}: {devices[type]}" />
                <drawtext condition="{devices[hascam]}" x="{width(label)} + 15" y="0" font="{light}" fontsize="{rowheight}*0.40" color="{clrWhite}" text="(CAM {devices[cam]})" />
                <drawtext condition="{devices[recording]} ++ {devices[livetv]}" align="right" y="0" font="{light}" fontsize="{rowheight}*0.40" color="{clrRed}" text="LiveTV, Recording ({devices[channelname]}) " />
                <drawtext condition="{devices[recording]} ++ not{devices[livetv]}" align="right" y="0" font="{light}" fontsize="{rowheight}*0.40" color="{clrRed}" text="Recording ({devices[channelname]}) " />
                <drawtext condition="not{devices[recording]} ++ {devices[livetv]}" align="right" y="0" font="{light}" fontsize="{rowheight}*0.40" color="{clrWhite}" text="LiveTV ({devices[channelname]}) " />
                <drawrectangle condition="{devices[istuned]}" x="5" y="{rowheight}/3 + 5" width="{areawidth} * {devices[signalstrength]} / 100 - 10 * {devices[signalstrength]} / 100" height="{rowheight}/3 - 10" color="{clrTransWhite}" />
                <drawrectangle condition="{devices[istuned]}" x="5" y="2*{rowheight}/3 + 5" width="{areawidth} * {devices[signalquality]} / 100 - 10 * {devices[signalquality]} / 100" height="{rowheight}/3 - 10" color="{clrTransWhite}" />
                <drawtext condition="not{devices[istuned]}" align="center" y="{rowheight}/2" font="{light}" fontsize="{rowheight}*0.40" color="{clrWhite}" text="not tuned" />
            </loop>
        </area>
    </devices>

    <!-- Available Variables systemload:
    {load}                      current system load
    -->
    <systemload>
        <area x="75%" y="40%" width="25%" height="5%" layer="1">
            <fill color="{clrTransBlack}"/>
        </area>
        <area x="75%" y="40%" width="25%" height="5%" layer="2">
            <drawtext x="5" valign="center" font="{light}" fontsize="100%" color="{clrWhite}" text="System Load: {load}" />
        </area>
    </systemload>

    <!-- Available Variables customtokens:
    all custom tokens set by the svdrp command SCTK are available in this viewelement
    For instance, use an appropriate script which runs periodically as cronjob and
    sets these custom tokens with svdrpsend or dbus2vdr
    --> 
    <customtokens>
    </customtokens>

    <menuitems x="0" y="7%" orientation="vertical" width="70%" height="56%" align="center" numlistelements="8">
        <!-- Available Variables main menu listelement:
        {nummenuitem}             number of item in list, starts with 1
        {label}                   label of menu item
        {number}                  number of menu item (or empty string if not set)
        {icon}                    path of appropriate icon
        {current}                 true if item is currently selected 
        {separator}               true if item is a list separator 
        -->
        <listelement>
            <area x="0" width="60%" layer="2">
                <fill condition="not{current}" color="{clrTransparent}" />
                <fill condition="{current}" color="{clrTransBlueLight}" />
            </area>
            <areascroll scrollelement="menutext" mode="forthandback" orientation="horizontal" delay="1000" scrollspeed="medium" x="0" width="60%" layer="3">
                <drawtext name="menutext" x="20" valign="center" font="{light}" fontsize="90%" color="{clrWhite}" text="{number} {label}" />
            </areascroll>
        </listelement>
        <!-- additional element which is drawn for current element -->
        <!-- Available Variables main menu currentelement:
        {label}                   label of menu item
        {number}                  number of menu item (or empty string if not set)
        {icon}                    path of appropriate icon
        -->
        <currentelement delay="50" fadetime="0">
            <area x="61%" y="22%" width="36%" height="52%" layer="2">
                <fill color="{clrTransBlueLight}" />
            </area>
            <area x="61%" y="23%" width="36%" height="50%" layer="3">
                <drawimage imagetype="menuicon" path="{icon}" align="center" valign="center" width="{areaheight} - 10" height="{areaheight} - 10"/>
            </area>
        </currentelement>
    </menuitems>
    
    <scrollbar>
        <area x="68%" y="7%" width="2%" height="56%" layer="2">
            <fill color="{clrWhite}" />
            <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="{clrWhite}" />
        </area>
    </scrollbar>
</menumain>
