<div id="portlet-calendar-overlay" class="portlet"
     i18n:domain="schooltool" tal:condition="view/show_overlay">

  <h4 i18n:translate="">Calendars</h4>

  <form method="post" action="" tal:attributes="action request/URL"
        tal:define="dummy view/update;
                    items view/items">

    <table class="overlays">

      <tr>
        <th style="text-align: center">
          <acronym title="Personal calendar" i18n:attributes="title"
                   i18n:translate="">Cal</acronym>
        </th>
        <th><acronym title="Timetable calendar" i18n:attributes="title"
                     i18n:translate="">TT</acronym></th>
        <th></th>
        <th></th>
      </tr>

      <tr style="background: #9db8d2">
        <td><input type="checkbox" checked="checked" disabled="disabled" /></td>
        <td><input type="checkbox" name="my_timetable"
                   tal:attributes="checked view/myTimetableShown" /></td>
        <td style="width: 100%" i18n:translate="">My Calendar</td>
        <td></td>
      </tr>
      <tr tal:repeat="item items/items"
          tal:attributes="style string:background: ${item/color1}">
        <td><input type="checkbox" name="overlay:list"
        tal:attributes="value item/id; checked item/checked" /></td>
        <td><input type="checkbox" name="overlay_timetables:list"
        tal:attributes="value item/id; checked item/checked_tt" /></td>
        <td style="width: 100%" tal:content="item/title">Title</td>
        <td><a class="go"
               tal:attributes="href item/calendar/@@absolute_url;
                               style string:background: ${item/color2};;
                               color: ${item/color2}"
               >&nbsp;</a></td>
      </tr>
    </table>
    <table class="overlays" tal:repeat="group items/groups">
      <tr><td colspan="3">
        <div class="dropdown contracted">
          <h3 onclick="$(event.target).parent().parent().parent().siblings().toggle();
                       return false;"
              tal:content="group/title" class="title">Term title</h3>
        </div>
      </td></tr>
      <tr tal:repeat="item group/items"
          tal:attributes="style string:background: ${item/color1}">
        <td><input type="checkbox" name="overlay:list"
        tal:attributes="value item/id; checked item/checked" /></td>
        <td><input type="checkbox" name="overlay_timetables:list"
        tal:attributes="value item/id; checked item/checked_tt" /></td>
        <td style="width: 100%" tal:content="item/title">Title</td>
        <td><a class="go"
               tal:attributes="href item/calendar/@@absolute_url;
                               style string:background: ${item/color2};;
                               color: ${item/color2}"
               >&nbsp;</a></td>
      </tr>
    </table>
    <h4 i18n:translate=""><a href="#" onclick="$('#more_overlays').toggle();return false;">More...</a></h4>
    <div id="more_overlays" style="display:none">
      <table class="overlays" tal:repeat="group items/more_groups">
        <tr><td colspan="3">
          <div class="dropdown contracted">
            <h3 onclick="$(event.target).parent().parent().parent().siblings().toggle();return false;"
                tal:content="group/title" class="title">Term title</h3>
          </div>
        </td></tr>
        <tr tal:repeat="item group/items"
            tal:attributes="style string:background: ${item/color1};;
                            display:none">

          <td><input type="checkbox" name="overlay:list"
                     tal:attributes="value item/id; checked item/checked" /></td>
          <td><input type="checkbox" name="overlay_timetables:list"
                     tal:attributes="value item/id; checked item/checked_tt" /></td>
          <td style="width: 100%" tal:content="item/title">Title</td>
          <td><a class="go"
                 tal:attributes="href item/calendar/@@absolute_url;
                                 style string:background: ${item/color2};;
                                 color: ${item/color2}"
                 >&nbsp;</a></td>
        </tr>
      </table>
    </div>
    <div class="controls">
      <input name="OVERLAY_APPLY" type="submit" value="Apply"
             i18n:attributes="value"/>
      <input name="OVERLAY_MORE" type="submit" value="Manage..."
             i18n:attributes="value"/>
    </div>
  </form>
</div>
