MMM-soccer.njk

<div class="soccerWrapper {% if isModalActive %}MMM-soccer-blur{% endif %}" style="width: {{config.width}}px">
<header>MMM-Soccer</header>
	
{% if loading %}
	{{'LOADING' | translate}}
{% else %}
	{% if config.showMatches %}
		<div class="xsmall">
			{% if comps.length %}
				{% for i in range(0, comps.length) %}
				<table class="games">
					<tbody>
						<tr class="small matchDay bold">{{ comps[i].competition }}</div></tr>
						<tr class="small matchDay bold">{{ comps[i].season }}</div></tr>
						{% for m in range(0, comps[i].matches.length) %}					
							<tr class="centered-row {% if comps[i].matches[m].focused %}bright{% endif %}">
							<td class="name matchName homeTeam {{comps[i].matches[m].status}} {{comps[i].matches[m].homeTeam.status}}">{{comps[i].matches[m].homeTeam.name | replace}}</td>
							{% if config.logos %}
								<td class="logo">
									<!--<svg class="logo-svg" width="100%" height="100%">{{ teams[comps[i].matches[m].homeTeam.id].crestUrl }}</svg>-->
									<img class="icon {% if not config.colored %}no-color{% endif %}" src="{{teams[comps[i].matches[m].homeTeam.id].crestUrl}}"/>
								</td>
							{% endif %}
							<td class="status bold {{comps[i].matches[m].status}}">{{ comps[i].matches[m].state }}</td>
							{% if config.logos %}
								<td class="logo"><img class="icon {% if not config.colored %}no-color{% endif %}" src="{{teams[comps[i].matches[m].awayTeam.id].crestUrl}}"/></td>
							{% endif %}
							<td class="name matchName awayTeam {{comps[i].matches[m].status}} {{comps[i].matches[m].awayTeam.status}}">{{comps[i].matches[m].awayTeam.name | replace}}</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
				{% endfor %}
			{% else %}
				<tr class="centered-row">
					<td>{{ 'NO_MATCHES' | translate }}</td>
				</tr> 
			{% endif %}
		</div>
	{% endif %}

	{% if showTable %}
		<table class="xsmall table">
			<thead>
				<tr class="row">
					<th></th>
					{% if config.logos %}
						<th></th>
					{% endif %}
					<th class="name">{{'TEAM' | translate}}</th>
					<th class="centered"><i class="fas fa-futbol"/></th>
					<th class="centered"><i class="fas fa-chart-line"/></th>
					<th class="centered"><i class="fas fa-bullseye"/></th>
				</tr>
			</thead>
			<tbody>
				{% for i in range(boundaries.firstTeam, boundaries.lastTeam) %}
					<tr class="centered-row {% if i === boundaries.focusTeamIndex %}bright{% endif %}" style="{{i | fade(boundaries.focusTeamIndex)}}">
					<tr class="centered-row {% if i === boundaries.focusTeamIndex %}bright{% endif %}" style="{{i | fade(boundaries.focusTeamIndex)}}">
						<td>{{table[i].position}}</td>
						{% if config.logos %}
							<td class="logo"><img class="icon {% if not config.colored %}no-color{% endif %}" src="{{table[i].team.crestUrl}}"/></td>
						{% endif %}
						<td class="name">{{table[i].team.name | replace}}</td>
						<td class="centered">{{table[i].playedGames}}</td>
						<td class="centered">{{table[i].points}}</td>
						<td class="centered">{% if table[i].goalDifference > 0 %}+{% endif %}{{table[i].goalDifference}}</td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
	{% endif %}
{% endif %}
</div>


{% if isModalActive %}
	<div class="modal">

	{% if modal.standings %}
		<table class="small table">
			<thead>
				<tr class="row">
					<th></th>
					{% if config.logos %}
						<th></th>
					{% endif %}
					<th class="name">{{'TEAM' | translate}}</th>
					<th class="centered"><i class="fas fa-chart-line"/></th>
					<th class="centered"><i class="fas fa-futbol"/></th>
				</tr>
			</thead>
			<tbody>
				{% for entry in table %}
					<tr class="centered-row {% if index === boundaries.focusTeamIndex %}bright{% endif %}">
						<td>{{entry.position}}</td>
						{% if config.logos %}
							<td><img class="icon {% if not config.colored %}no-color{% endif %}" src={{entry.team.crestUrl}}/></td>
						{% endif %}
						<td class="name">{{entry.team.name}}</td>
						<td class="centered">{{entry.points}}</td>
						<td class="centered">{{entry.goalDifference}}</td>
					</tr>
				{% endfor %}
			</tbody>
		</table>
	{% else %}
		<h1 class="medium">{{competitionName}} - {{'COMMAND_LIST' | translate}}</h1>
		<div>{{'MODE' | translate}}: {{voice.mode}}</div>
		<div>{{'VOICE_COMMANDS' | translate}}</div>
		<ul>
			{% for sentence in voice.sentences %}
				<li>{{sentence}}</li>
			{% endfor %}
		</ul>
	{% endif %}

	</div>
{% endif %}