<!DOCTYPE html>
<html lang="en">

    <!-- HTML Head -->
    <head>

        <!-- Page Title -->
        <title>
            Tennis Data Sheets
        </title>      
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <!-- Style -->
        <style type="text/css" media="screen,print">
            
            /* Default Margins and Paddings */
            * {margin: 0; padding: 0;}


            /* No image borders by default */
            img {border: none;}

            /* Page Body */
            html, body {                               
                font-family: Trebuchet MS, Helvetica, sans-serif;
                font-size: 8pt;                
                
                color: #000000;
                background: #ffffff;                
            }

            h1 {
                font-size: 14pt;
            }

            h2 {
                font-size: 12pt;
            }
            
            .page_break {page-break-after: always;}

            .full {width: 100%;}
            .half {width: 50%;}
            .quarter {width: 25%;}

            .text_left {text-align: left;}
            .text_right {text-align: right;}
            .text_center {text-align: center;}
            .text_justify {text-align: justify;}

            .float_left {float: left;}

            .italic {font-style: italic;}
            
            table {
                border-collapse: collapse;
                width: 100%;
            }    

            table td {
                border: 1px solid black;
                padding: 1px 4px 1px 4px;
            }

            table td:nth-of-type(1) {
                width: 70px;                
            }        

            table td:nth-of-type(2) {
                width: 30px;
            }

            table td:nth-of-type(3) {
                width: 40px;
            }            

            table td:nth-of-type(5) {
                width: 50px;
            }           

            table tr:first-of-type td {
                border: none;
            }

        </style>


        <script type="text/javascript">
            $(document).ready(function ()
            {
                   

            });                

        </script>

        <!-- Google Analytics -->
        <script src="<?php echo asset('scripts/analyticstracking.js'); ?>" type="text/javascript"></script> 
                
    </head>

    <body>                         

        <?php foreach ($info as $header => $groups): ?>

            <h1><?php echo $header; ?></h1>

            <br />

            <?php foreach ($groups as $subheader => $qualifiers): ?>

                <h2><?php echo $subheader; ?></h2>

                <br /><br />

                <table>                    
                    <tr>
                        <td>Event</td>
                        <td>Place</td>
                        <td>Seeded</td>
                        <td>Participant</td>
                        <td>Grade</td>
                        <td>School</td>
                        <td>Coach</td>
                    </tr>

                    <?php foreach ($qualifiers as $qualifier): ?>
                        <tr>
                            <td><?php echo $qualifier->event; ?></td>
                            <td><?php echo $qualifier->place; ?></td>
                            <td><?php echo $qualifier->seed; ?></td>
                            <td><?php echo $qualifier->display_name; ?></td>
                            <td><?php echo $qualifier->display_grade; ?></td>
                            <td><?php echo $qualifier->ap_name; ?></td>
                            <td><?php echo $qualifier->coach_name; ?></td>
                        </tr> 
                    <?php endforeach; ?>
                </table>

                <br /><br />

            <?php endforeach; ?>

            <div class="page_break"></div>


        <?php endforeach; ?>

    </body>    
</html>   
