angular.module("gameHeader", [])
    .directive('gameHeader', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                slId: '=',
                game: '='
            },
            template: '<div id="{{slId}}" class="game-header">' +
                        '<div class="team-identification">' +
                            '<div class="img-container">' +
                                '<img src="{{game.visitors.logoSrc}}" class="team-logo" alt="team logo">' +
                            '</div>' +
                            '<p class="team-name left">{{game.visitors.location}} {{game.visitors.name}}</p>' +
                        '</div>' +
                        '<div class="game-identification">' +
                            '<img  src="{{game.league.logoSrc}}" class="league-logo" alt="league logo">' +
                            '<p class="vs-text">VS</p>' +
                            '<p><small>{{game.date}}</small></p>' +
                        '</div>' +
                        '<div class="team-identification">' +
                            '<div class="img-container">' +
                                '<img src="{{game.home.logoSrc}}" class="team-logo" alt="team logo">' +
                            '</div>' +
                            '<p class="team-name right">{{game.home.location}} {{game.home.name}}</p>' +
                        '</div>' +
                '</div>'
        }; // end of directoive factory
    })