@section('page_title')
    OSAA - Programs
@stop

@section('page_sub_title')    
    OSAA State Championship Programs
@stop

@section('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>

@stop

@section('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'});

@stop

@section('page_functions')
   
    <a href="{{ url('/programs/archive') }}" class="archive_button">Program Archive</a>

@stop


@section('main_content')    

    
    @foreach ($info['programs'] as $program)

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

    @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>

    @endif




    
        
@stop