<?php $__env->startSection('page_title'); ?>
    OSAA - Programs
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page_sub_title'); ?>    
    OSAA State Championship Programs
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
    @parent

    <style type="text/css">
        
    	.program {
        	display: block;
        	width: 200px;        	
        	float: left;
        	margin-right: 50px;
        	margin-bottom: 3em;
        }

    	.program:hover {
        	text-decoration: none;        	
        }

        .program .preview:hover {
        	border-color: #990000;
        	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+43,efe7ae+100 */
			background: #ffffff; /* Old browsers */
			background: -moz-linear-gradient(top,  #ffffff 43%, #efe7ae 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  #ffffff 43%,#efe7ae 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  #ffffff 43%,#efe7ae 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efe7ae',GradientType=0 ); /* IE6-9 */
        }

        .program .preview {
        	width: 200px;
        	height: 275px;
        	border: 2px solid #cccccc;
        	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfdff+12,deefff+82,98bede+100 */
			background: #fcfdff; /* Old browsers */
			background: -moz-linear-gradient(top,  #fcfdff 12%, #deefff 82%, #98bede 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  #fcfdff 12%,#deefff 82%,#98bede 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  #fcfdff 12%,#deefff 82%,#98bede 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfdff', endColorstr='#98bede',GradientType=0 ); /* IE6-9 */

        }

        .program .preview .title {
        	margin: 1em 0 0.5em 0;
        	text-align: center;
        	font-size: 12pt;
        	font-weight: bold;
        }

        .program .preview .location {
        	font-size: 9pt;
        	text-align: center;
        	margin-bottom: 0.25em;
        }

        .program .preview img {
        	display: block;
        	margin: 0 auto;
        }

        .program .preview .published {
            font-size: 8pt;
            text-align: center;
        }



    </style>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('jquery_init'); ?>
    
    /*
     * Log program click event as a digital program download
     */
    $('[data-event-category]').click(function(event)
    {
        var element = $(this);
        logGoogleEvent(element);

        return true;
    });

    function logGoogleEvent(element)
    {
        var category = element.attr('data-event-category');
        var action = element.attr('data-event-action');
        var label = element.attr('data-event-label');

        ga('send', 'event', category, action, label);        
    }

    $('.archive_button')
        .button()
        .css({'font-size' : '9pt'});

<?php $__env->stopSection(); ?>

<?php $__env->startSection('page_functions'); ?>
   
    <a href="<?php echo url('/programs/archive'); ?>" class="archive_button">Program Archive</a>

<?php $__env->stopSection(); ?>


<?php $__env->startSection('main_content'); ?>    

    
    <?php foreach ($info['programs'] as $program): ?>

        <?php if (!is_null($program->link)): ?>
            <a href="<?php echo $program->link; ?>" class="program" target="_blank" data-event-category="<?php echo $program->category; ?>" data-event-action="<?php echo $program->action; ?>" data-event-label="<?php echo $program->label; ?>">
        <?php else: ?>
            <a href="#" class="program" target="_blank">
        <?php endif; ?>
            <div class="preview ui-corner-all">
                <div class="title"><?php echo $program->title; ?></div>
                <?php if (!is_null($program->location)): ?>
                    <div class="location"><?php echo $program->location; ?></div>
                <?php endif; ?>
                <img src="<?php echo $program->getImage(); ?>" alt="" title="" />
                <div class="published">Updated <?php echo date('n/j/Y', strtotime($program->published_at)); ?></div>
            </div>
        </a>
    <?php endforeach; ?>

    <?php if (count($info['programs']) < 1): ?>

        <div style="text-align: center; width: 100%; font-size: 14pt; color: #0d2458; margin: 3em 0 1em 0;">
            Coming Soon
        </div>

        <div style="text-align: center; width: 100%; font-size: 11pt;">
            Digital programs will become available as the championship event comes closer.
        </div>

    <?php endif; ?>




    
        
<?php $__env->stopSection(); ?>