<%
    import math
    break_tile_lines = math.ceil(len(tiles)/2)
    tilecounter = 1
    vp_size = 1;

    if len(tiles) <= 2:
        vp_size = "6vw"
    elif len(tiles) >2 and len(tiles) <=4 :
        vp_size = "5vw"
    elif len(tiles) >4 and len(tiles) <=6 :
        vp_size = "4vw"
    elif len(tiles) >6 and len(tiles) <=8 :
        vp_size = "3vw"
    end
%>

<style>
    *{
        margin: 0 auto;
        padding: 0 auto;
    }

    #wrapper{
        display: table;
        color: black;
        background-color: #F2F2F2;
        min-width: 100%;
        min-height: 100%;
        border-spacing: 10px;
    }

    .tile{
        background-color: #FFFFFF;
        display:table-cell;

        width: auto;
        height: auto;
        border: 1px solid #999999;
        text-align:center;
        vertical-align: middle;

        -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
        box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);

    }

    .clear{
        display: table-row;
        clear: both;
        margin: 0;
        padding: 0;
        height: 0;
        overflow: hidden;
    }

    .statusmon{
        border: 1px solid #000000;
        color: white;
        font-size: {{vp_size}};
        font-family: "Lucida Console", Monaco, monospace;
    }

    .chart{
        font-size: {{vp_size}};
        font-family: "Lucida Console", Monaco, monospace;
    }

    .active{
        background-color: #009900;
    }

    .dead{
        background-color: #990000;
    }

</style>

<div id = "wrapper">

    % for tile in tiles :
        % type = ""
        % text = ""
        % status = ""
        % if tile["type"] == "mon" :
            % type = "statusmon"
            % text = tile["source"]
            % if tile["status"] == "up" :
                % status = "active"
            % elif tile["status"] == "down" :
                % status = "dead"
            % end
        % elif tile["type"] == "d3.js" :
            % type = "chart"
            % text = "place for a chart!"
        % end

        <div class = "tile {{type}} {{status}}">
            {{text}}
        </div>

        % if tilecounter == break_tile_lines:
            <div class = "clear"></div>
        % end

        % tilecounter += 1
    % end

</div>