{% extends "/themes/default/index.html" %}

{% block css %}
{{ parent() }}
<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/document.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/share.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/eye.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/controller.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/slash.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/icons/camera.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/total.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/diagram.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/graph.css" />
<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/distributions.css" />
{% endblock %}

{% block main %}
{% include '/themes/default/elements/timeline.html' %}
{% include '/themes/default/elements/menu.html' %}
<section class="row">
	<section id="total" class="column rounded main">
		<h1 class="unselectable row">Общие показатели за 2024 год<a title="Поделиться"><i class="icon share"></i></a><a
				title="Скачать XSLX-документ"><i class="icon document"></i></a></h1>
		<div class="grow row">
			<div class="column grow">
				<div class="column grow">
					<p class="block text rounded grow">
						здесь потом статья будет
						<a class="continue">Читать продолжение</a>
					</p>
				</div>
			</div>
			<div class="column">
				<video class="block grow rounded" controls width="250">
					<source src="/media/cc0-videos/flower.webm" type="video/webm" />
					<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
					Download the
					<a href="/media/cc0-videos/flower.webm">WEBM</a>
					or
					<a href="/media/cc0-videos/flower.mp4">MP4</a>
					video.
				</video>
				<ul id="statistics" class="column block rounded">
					<li>
						<span class="name">Участники</span>
						<span class="value" style="--old: '0'">8</span>
					</li>
					<li>
						<span class="name">Постройки</span>
						<span class="value" style="--old: '0'">3</span>
					</li>
					<li>
						<span class="name">Транспорт</span>
						<span class="value">0</span>
					</li>
				</ul>
			</div>
		</div>
		<div id="diagram" class="column">
			<small class="formula unselectable">участники + постройки + транспорт + сумма ресурсов + завершённые
				проекты</small>
			<svg class="chart unselectable" viewBox="-30 -40 260 280">
				<rect class="background" width="260" height="155" />
				<polyline points="0,155 20,124 40,124 60,124 80,110 100,80 120,80 140,64 160,43 180,29 200,0 220,0" />
				<polyline points="0,155 20,124 40,124 60,124 80,110 100,80 120,80 140,64 160,43 180,29 200,0 220,0" />
				<polyline class="legend" points="0,155 260,155" />
				<text class="legend" x="260" y="175">Время</text>
				<polyline class="legend" points="0,155 0,0" />
				<text class="legend vertical" x="0" y="-15">Общие показатели</text>
				<a class="node" href="{{ year }}/january" target="_blank">
					<text x="-5" y="190">Январь</text>
					<circle cx="0" cy="120" />
				</a>
				<a class="node" href="{{ year }}/february" target="_blank">
					<text x="15" y="190">Февраль</text>
					<circle cx="20" cy="100" />
				</a>
				<a class="node" href="{{ year }}/march" target="_blank">
					<text x="34" y="190">Март</text>
					<circle cx="40" cy="80" />
				</a>
				<a class="node" href="{{ year }}/april" target="_blank">
					<text x="55" y="190">Апрель</text>
					<circle cx="60" cy="65" />
				</a>
				<a class="node" href="{{ year }}/may" target="_blank">
					<text x="75" y="190">Май</text>
					<circle cx="80" cy="65" />
				</a>
				<a class="node" href="{{ year }}/june" target="_blank">
					<text x="93" y="190">Июнь</text>
					<circle cx="100" cy="42" />
				</a>
				<a class="node" href="{{ year }}/july" target="_blank">
					<text x="113" y="190">Июль</text>
					<circle cx="120" cy="21" />
				</a>
				<a class="node" href="{{ year }}/august" target="_blank">
					<text x="135" y="190">Август</text>
					<circle cx="140" cy="24" />
				</a>
				<a class="node" href="{{ year }}/september" target="_blank">
					<text x="155" y="190">Сентябрь</text>
					<circle cx="160" cy="12" />
				</a>
				<a class="node" href="{{ year }}/october" target="_blank">
					<text x="175" y="190">Октябрь</text>
					<circle cx="180" cy="8" />
				</a>
				<a class="node" href="{{ year }}/november" target="_blank">
					<text x="195" y="190">Ноябрь</text>
					<circle cx="200" cy="5" />
				</a>
				<a class="node" href="{{ year }}/december" target="_blank">
					<text x="215" y="190">Декабрь</text>
					<circle cx="220" cy="0" />
				</a>
			</svg>
		</div>
		<!--     <div id="diagram">
      <svg class="pie" viewBox="0 0 20 20" transform="rotate(-90)">
        <circle class="background" r="10" cx="10" cy="10" />
        <circle r="5" cx="10" cy="10" style="--size: 0.65" />
        <circle r="5" cx="10" cy="10" style="--size: 0.6" />
        <circle r="5" cx="10" cy="10" style="--size: 0.48" />
        <circle r="5" cx="10" cy="10" style="--size: 0.3" />
        <circle r="5" cx="10" cy="10" style="--size: 0.15" />
      </svg>
      <span>Диаграмма</span>
    </div>
    <ul class="legend">
      <li><b>Участники</b><span></span></li>
      <li><b>Постройки</b><span></span></li>
      <li><b>Транспорт</b><span></span></li>
      <li><b>Проекты</b><span></span></li>
      <li><b>Бюджет</b><span></span></li>
    </ul> -->
		<div class="footer row unselectable">
			<small>2024.12.09</small>
			<small class="phrase">Сюда можно будет генерировать случайную фразу</small>
			<!--       <small>English</small>
      <small>Русский</small> -->
			<small id="views" class="row"><span>1693</span><i class="icon eye small"></i>
				<div class="visibility"></div>
			</small>
		</div>
	</section>
</section>
{% endblock %}

{% block graph %}
<section id="distributions" class="graph">
	{% for distribution in distributions %}
	<article id="{{ distribution.identifier }}" class="node distribution unselectable"><a>{{ distribution.name }}</a></article>
	{% for member in distribution.members %}
	<article id="{{ member.identifier }}" class="node member unselectable"><a>{{ member.name.second is empty ? member.name.first
			: member.name.second }}</a></article>
	{% endfor %}
	{% endfor %}
</section>
<div class="loading"><i class="icon loading"></i></div>
{% endblock %}

{% block js %}
{{ parent() }}
<script src="/js/elements/distributions.js"></script>
<script src="/js/elements/diagram.js"></script>
<script src="/js/elements/eye.js"></script>
{% endblock %}
