{extends "../@layout.xml"}
{block title}{$club->getName()} » {_statistics}{/block}

{block header}
    <a href="{$club->getURL()}">{$club->getName()}</a> » {_statistics}
{/block}

{block content}
    <div class="tabs">
        <div class="tab">
            <a href="/club{$club->getId()}/edit">
                {_main}
            </a>
        </div>
        <div class="tab">
            <a href="/club{$club->getId()}/followers">
                {_followers}
            </a>
        </div>
        <div id="activetabs" class="tab">
            <a id="act_tab_a" href="javascript:void(0)">
                {_statistics}
            </a>
        </div>
    </div>
    
    <div class="container_gray">
        <h4>Охват</h4>
        <p>Этот график отображает охват за последние 7 дней.</p>
        <div id="reachChart" style="width: 100%; height: 280px;"></div>
        
        <h4>Просмотры</h4>
        <p>Этот график отображает просмотры постов сообщества за последние 7 дней.</p>
        <div id="viewsChart" style="width: 100%; height: 280px;"></div>
        
        <style>
            .modebar-container {
                display: none !important;
            }
        </style>
        {script "js/node_modules/plotly.js-dist/plotly.js"}
        <script>
            function makePlot(selector, datum) {
                Plotly.newPlot(document.querySelector(selector), [datum.total, datum.subs, datum.viral], {
                    margin: { t: 0 },
                    layout: { showlegend: true, legend: { xanchor: 'center', x: 0.5, orientation: 'h' } }
                });
            }
            
            let reach = {$reach};
            let views = {$views};
            
            makePlot("#reachChart", reach);
            makePlot("#viewsChart", views);
        </script>
    </div>
{/block}