<?xml version='1.0'?>
<!DOCTYPE var:component>
<var:component
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:var="http://www.skyrix.com/od/binding"
  xmlns:const="http://www.skyrix.com/od/constant"
  xmlns:uix="OGo:uix"
  xmlns:label="OGo:label"
  className="UIxPageFrame"
  const:popup="YES">
  <style type="text/css">
      <var:foreach list="calendars" item="currentCalendar">
          DIV.borderCalendarFolder<var:string value="currentCalendar.folder" />
          { border: 1px solid <var:string value="currentCalendar.color" />; }
          DIV.backgroundCalendarFolder<var:string value="currentCalendar.folder" />
          { background-color: <var:string value="currentCalendar.color" />; color: <var:string value="contrastingTextColor" />; }
      </var:foreach>
  </style>
  <div id="leftSide" class="no-print">
    <!-- Print settings -->
    <span class="caption"><var:string label:value="Print Settings" /></span>
    <table class="frame">
      <tr>
        <td style="width: 30%;">
          <label id="labelTitle"><var:string label:value="Title" /></label></td>
        <td>
          <input type="text" id="inputFieldTitle" value="" /></td>
      </tr>
      <tr>
        <td>
          <label><var:string label:value="Layout" /></label></td>
        <td>
          <var:popup list="printLayoutList" item="item"
          const:id="printLayoutList"
          string="itemPrintLayoutText" selection="parentPrintLayout" /></td>
      </tr>
    </table>
  
    <!-- What to print -->
    <span class="caption"><var:string label:value="What to Print" /></span>
    <table class="frame">
      <tr>
        <td>
          <input type="checkbox" id="printEvents" value="eventsSelected" checked="true" onChange="onEventsCheck(this);"/>
          <var:string label:value="Events"/>
          <input type="checkbox" id ="printTasks" value="tasksSelected" checked="true" onChange="onTasksCheck(this);"/>
          <var:string label:value="Tasks"/></td></tr>
<!-- TODO
      <tr>
        <td>
          <label>
            <input type="radio" name="printView" id="currentView" value="currentViewSelected" checked="true" onChange="onPrintDateCheck();"/>
            <var:string label:value="Current view" /></label></td></tr>
      <tr>
        <td>
          <label>
            <input type="radio" name="printView" id="eventsTasks" value="eventsTasksSelected" onChange="onPrintDateCheck();"/>
            <var:string label:value="Selected events and tasks" /></label></td></tr>
      
      <tr>
        <td>
          <label>
            <input type="radio" name="printView" id="customDate" value="customDateSelected" onChange="onPrintDateCheck();" />
            <var:string label:value="Custom date range" /></label></td></tr>
      <tr>
        <td id="dateRangeFrom" name="dateRange">
          <label id="labelFrom"><var:string label:value="From" /></label>
          <var:component className="UIxDatePicker"
          const:dateID="startingDate"
          day="startDay"
          month="startMonth"
          year="startYear"
          label:label="Select starting date"/></td></tr>
      <tr>
        <td id="dateRangeTo" name="dateRange">
          <label id="labelTo"><var:string label:value="To" /></label>
          <var:component className="UIxDatePicker"
          const:dateID="endingDate"
          day="endDay"
          month="endMonth"
          year="endYear"
          label:label="Select ending date"/></td></tr>
-->
    </table>
    
    <!-- Options -->
    <span class="caption"><var:string label:value="Options" /></span>
    <table class="frame">
      <tr>
        <td>
          <input type="checkbox" name="printWorkingHours" id="printHours" checked="true" onChange="onPrintWorkingHoursCheck(this);" />
          <var:string label:value="Display working hours only" /></td></tr>
      <tr>
          <td>
              <hr /></td></tr>
      <tr>
        <td>
          <input type="checkbox" id="printColors" checked="true" onChange="onPrintColorsCheck(this);" />
          <var:string label:value="Display events and tasks colors" /></td></tr>
      <tr>
        <td>
          <input type="radio" name="printColors" id="printBorderColors" value="borders" onChange="onPrintColors(this);" selection="borders"/>
          <var:string label:value="Borders" />
          <input type="radio" name="printColors" id="printBackgroundColors" value="backgrounds" onChange="onPrintColors(this);" />
          <var:string label:value="Backgrounds" /></td></tr>
      <tr>
        <td>
          <hr /></td></tr>
      <tr>
        <td>
          <input type="checkbox" name="printOptions" id="selectNoDueDateTasks" checked="true" onChange="onPrintNoDueDateTasksCheck(this);" />
          <var:string label:value="Tasks with no due date" /></td></tr>
      <tr>
        <td>
          <input type="checkbox" name="printOptions" id="selectCompletedTasks" checked="true" onChange="onPrintCompletedTasksCheck(this);" />
          <var:string label:value="Completed tasks" /></td></tr>
    </table>
  </div>
  <div id="rightSide">
    <div id="rightFrame">
      <div id="rightFrameTitle"><!-- Spacer --></div>
      <div id="rightFrameEvents"><!-- Spacer --></div>
      <div id="rightFrameTasks"><!-- Spacer --></div>
    </div>
    <div id="printButtons" class="no-print">
      <a class="button" name="print" id="printButton">
        <span><var:string label:value="Print view" /></span></a>
      <a class="button" name="cancel" id="cancelButton">
        <span><var:string label:value="Cancel"/></span></a>
    </div>
  </div>
</var:component>
