1<#assign cdnURL = "https://superligacdn.stellis.one"/>
2<#setting locale = locale>
3
4<div>
5 <div class="image-article-container image-article-container-single-player">
6 <a href="/i-zespol" class="btn-go-back"><span class="icon icon-slg-chevron-left"></span>
7 ${TranslationUtil.get("back-to-the-list-of-players", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}
8 </a>
9 <div class="img-wrapper">
10 <#if player.photoMediaWebDTO??>
11 <picture>
12 <source media="(max-width:300px)" srcset="${cdnURL}/imgsize-s${player.photoMediaWebDTO.url}">
13 <source media="(max-width:600px) and (min-width:300px)" srcset="${cdnURL}/imgsize-m${player.photoMediaWebDTO.url}">
14 <img loading="lazy" class="player-photo" src="${cdnURL}/imgsize-l${player.photoMediaWebDTO.url}"
15 alt="${player.firstName} ${player.lastName}">
16 </picture>
17 <#else>
18 <img class="player-photo" src="/o/single-player/images/photo-placeholder.png" alt="photo placeholder">
19 </#if>
20 <#if player.backgroundMediaWebDTO??>
21 <picture>
22 <source media="(max-width:300px)" srcset="${cdnURL}/imgsize-s${player.photoMediaWebDTO.url}">
23 <source media="(max-width:600px) and (min-width:300px)" srcset="${cdnURL}/imgsize-m${player.photoMediaWebDTO.url}">
24 <img loading="lazy" class="player-photo player-photo-transparent" src="${cdnURL}/imgsize-l${player.photoMediaWebDTO.url}"
25 alt="${player.firstName} ${player.lastName}">
26 </picture>
27 <#else>
28 <img class="player-photo player-photo-transparent"
29 src="/o/single-player/images/background-placeholder.png" alt="background placeholder">
30 </#if>
31 </div>
32 <div class="player-info">
33 <div class="player-info-content">
34 <div class="number-and-flag">
35 <#if player.number != 0>
36 <span class="number">#${player.number}</span>
37 </#if>
38 <img class="flag"
39 src="${themeDisplay.getPathThemeRoot()}/assets/img/flags/${player.shortNationality}.png">
40 </div>
41
42 <h2 class="name"><span>${player.firstName}</span> ${player.lastName}</h2>
43 <span class="position">${player.position}</span>
44 <div class="btn-wrapper btn-edit-placeholders">
45 <!-- Here will be edit button rendered by javascript -->
46 </div>
47 </div>
48
49 <div class="share-widget">
50 <#if player.instagram?has_content>
51 <a href="${player.instagram}" target="_blank"><span class="icon icon-slg-instagram"></span></a>
52 </#if>
53
54 <#if player.facebook?has_content>
55 <a href="${player.facebook}" target="_blank"><span class="icon icon-slg-facebook"></span></a>
56 </#if>
57
58 <#if player.twitter?has_content>
59 <a href="${player.twitter}" target="_blank"><span class="icon icon-slg-twitter"></span></a>
60 </#if>
61 </div>
62 </div>
63
64 <#if player.number != 0>
65 <div class="number-big">${player.number}</div>
66 </#if>
67 </div>
68
69 <div class="single-player-details-stats-container container">
70 <div class="single-player-details-container">
71 <#if player.birthday?has_content>
72 <#if player.number != 0>
73 <div class="single-player-details">
74 <span class="title">${TranslationUtil.get("date-of-birth-date", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}:</span>
75 <span class="value">${player.birthday}</span>
76 </div>
77 </#if>
78 </#if>
79
80 <#if player.weight?has_content && player.number != 0>
81 <div class="single-player-details">
82 <span class="title">${TranslationUtil.get("height", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}:</span>
83 <span class="value">${player.height} cm</span>
84 </div>
85 </#if>
86
87 <#if player.weight?has_content && player.number != 0>
88 <div class="single-player-details">
89 <span class="title">${TranslationUtil.get("weight", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}:</span>
90 <span class="value">${player.weight} kg</span>
91 </div>
92 </#if>
93
94 <#if player.position?has_content>
95 <div class="single-player-details">
96 <span class="title">${TranslationUtil.get("position", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}:</span>
97 <span class="value">${player.position}</span>
98 </div>
99 </#if>
100
101 <#if player.nickname?has_content>
102 <div class="single-player-details">
103 <span class="title">${TranslationUtil.get("nickname", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}:</span>
104 <span class="value">${player.nickname}</span>
105 </div>
106 </#if>
107
108 <#if player.nationality?has_content>
109 <div class="single-player-details">
110 <span class="title">${TranslationUtil.get("nationality", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}:</span>
111 <span class="value">${player.nationality}</span>
112 </div>
113 </#if>
114
115 <#if player.careerProgression?has_content>
116 <div class="single-player-details">
117 <span class="title">${TranslationUtil.get("career-progression", locale, "com.stellis.liga360.clubs.singleplayer.web")?lower_case}:</span>
118 <span class="value">${player.careerProgression}</span>
119 </div>
120 </#if>
121 </div>
122
123 <#if player.number != 0>
124 <div class="single-player-stats-container">
125 <div class="stats-season-dropdown">
126 <select id="matchDataDTOS" name="matchDataDTOS" class="single-player-stats-season-dropdown"
127 onchange="showStats(this)">
128 <#list entries as matchDataDTO>
129 <option value="${matchDataDTO.seasonId}">${matchDataDTO.seasonName}</option>
130 </#list>
131 </select>
132 <i class="icon icon-slg-chevron-down"></i>
133 </div>
134
135 <#list entries as matchDataDTO>
136 <div class="single-player-stats d-none" id="match-data-${matchDataDTO.seasonId}">
137 <#list matchDataDTO.matchDataMap as matchDataKey, matchDataValue>
138 <div class="single-player-stats-item animation-fade-in-trigger">
139 <span class="title">${matchDataKey}: </span>
140 <span class="value">${matchDataValue}</span>
141 </div>
142 </#list>
143 </div>
144 </#list>
145 </div>
146 </#if>
147 </div>
148
149 <div class="container desktop">
150 <div class="separator color-default"></div>
151 </div>
152
153 <div class="single-player-content container">
154 <div class="single-player-content-left">
155 <#if player.leadText?has_content>
156 ${player.getLeadByLocale(locale)}
157 </#if>
158 </div>
159
160 <div class="single-player-content-right">
161 <#if player.content?has_content>
162 ${player.getContentByLocale(locale)}
163 </#if>
164 </div>
165 </div>
166</div>
167
168<script>
169 var singlePlayerStats = document.getElementsByClassName("single-player-stats");
170 if (singlePlayerStats && singlePlayerStats.length > 0) {
171
172 singlePlayerStats[0].classList.remove('d-none')
173
174 function showStats(select) {
175 let matchData = document.getElementById('match-data-' + select.value);
176 for (const singlePlayerStat of singlePlayerStats) {
177 singlePlayerStat.classList.add("d-none")
178 }
179 matchData.classList.remove("d-none")
180 }
181 }
182</script>
