<svg preserveAspectRatio="xMaxYMin slice">
    <g class="headers">
        <rect x="0" 
                  y="0" 
                  ng-attr-width="{{svgWidth}}" 
                  ng-attr-height="{{headerHeight}}"
                  fill="white">
        </rect>
        <text ng-repeat="headerLabel in headerLabels"
              ng-attr-x="{{headerLabel.x}}"
              ng-attr-y="{{headerLabel.y}}"
              font-size="15px"
              text-anchor="middle"
              stroke="black"
              stroke-width="0.5">
            {{headerLabel.label}}
        </text>
    </g>
    <g class="times">
        <rect x="0"
                  y="0"
                  ng-attr-width="{{timesColumnWidth}}"
                  ng-attr-height="{{svgHeight}}"
                  fill="white">
        </rect>
        <text ng-repeat="timeLabel in timeLabels"
                  ng-attr-x="{{timeLabel.x}}"
                  ng-attr-y="{{timeLabel.y}}"
                  font-size="15px"
                  text-anchor="end"
                  stroke="black"
                  stroke-width="0.5">
            {{timeLabel.label}}
        </text>
    </g>
    <g class="gridlines">
        <line ng-repeat="gridline in gridLines"
              ng-attr-x1="{{gridline.x1}}"
              ng-attr-y1="{{gridline.y1}}"
              ng-attr-x2="{{gridline.x2}}"
              ng-attr-y2="{{gridline.y2}}"
              stroke="black"
              stroke-width="0.5">
        </line>
    </g>
    <g class="blocks">
        <rect ng-repeat="timetableBlock in timetableBlocks"
              ng-attr-x="{{timetableBlock.x}}"
              ng-attr-y="{{timetableBlock.y}}"
              ng-attr-width="{{timetableBlock.width}}"
              ng-attr-height="{{timetableBlock.height}}"
              ng-attr-fill="{{timetableBlock.color}}">
            
        </rect>
    </g>
    <g class="blocksContent">
        <g ng-repeat="timetableBlock in timetableBlocks">
            <text ng-repeat="content in timetableBlock.content track by $index"
                  ng-attr-x="{{timetableBlock.x + (timetableBlock.width / 2)}}"
                  ng-attr-y="{{timetableBlock.y + 2 + (($index + 1) * 15)}}"
                  font-size="15px"
                  text-anchor="middle"
                  stroke="black"
                  stroke-width="0.5">
                {{content}}
            </text>
        </g>        
    </g>
</svg>