<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="description" content="Clash Royale Dashboard for clan {{clan.name}} {{clan.tag}}. Here we post clan information, member standings, and war data." />

    <meta name="generator" content="crtools {{version}} [https://github.com/AaronTraas/Clash-Royale-Clan-Tools]" />

    <title>{{clan.name}} Clan Dashboard | crtools</title>

    <link rel="icon" href="favicon.ico"/>
{% if config.www.canonical_url != False %}
    <link rel="canonical" href="{{config.www.canonical_url}}" />
{% endif %}

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:300,300i,700,700i" />
    <link rel="stylesheet" href="static/crtools.css?version={{version}}" />
    <link rel="stylesheet" href="static/hero.css?version={{version}}" />
    <link rel="stylesheet" href="static/filters.css?version={{version}}" />
    <link rel="stylesheet" href="static/dialog.css?version={{version}}" />
{% if config.paths.use_fankit == True %}
    <link rel="stylesheet" href="static/fankit.css?version={{version}}" />
{% else %}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:700|Open+Sans:300,300i,700,700i" />
    <link rel="stylesheet" href="static/os-assets.css?version={{version}}" />
{% endif %}
</head>
<body data-active-dialog="none">
    <header><div class="inner">
        <h1>{{strings.mainHeader.format(clan_name=clan.name)}}</h1>
    </div></header>
    <main>
        <section id="hero">
            <div class="section-wrap">

                <div id="clan-description">
                {% if clan_hero %}
                    {{clan_hero}}
                {% else %}
                    <h1>{{clan.name}} ({{clan.tag}})</h1>
                    <h3>{{clan.description}}
                {% endif %}
                </div>
                <div id="clan-stats">
                    <div class="table-wrap">
                        <table>
                            <thead>
                                <tr>
                                    <th colspan="2">{{strings.labelClanStats}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><th>{{strings.labelClanScore}}</th><td>{{clan.clan_score}}</td></tr>
                                <tr><th>{{strings.labelClanName}}</th><td>{{clan.name}}</td></tr>
                                <tr>
                                    <th>{{strings.labelCountry}}</th>
                                {% if clan.location.is_country == true %}
                                    <td>{{clan.location.name}}<img class="flag" src="static/images/flags/{{clan.location.country_code|lower}}.png" /></td>
                                {% else %}
                                    <td>{{strings.labelInternational}}<img class="flag" src="static/images/flags/international.png" /></td>
                                {% endif %}
                                </td></tr>

                                <tr><th>{{strings.labelDonationsPerWeek}}</th><td>{{clan.donations_per_week}}</td></tr>
                                <tr><th>{{strings.labelRequiredTrophies}}</th><td>{{clan.required_trophies}}</td></tr>
                                <tr>
                                    <th>{{strings.labelWarTrophies}}</th>
                                    <td>
                                        {{clan.clan_war_trophies}}
                                        <img class="war-league" title="{{clan.war_league_name}}" src="static/images/war-league-{{clan.war_league}}.svg" />
                                    </td>
                                </tr>
                                <tr><th>{{strings.labelClanTag}}</th><td>{{clan.tag}}</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <p class="last-update">{{strings.labelLastUpdate}}: {{update_date}}</p>
                    {% if clan.members < 50 %}
                    <div class="join-cta">
                        <h3>{{strings.ctaLookingForClan}}</h3>
                        <a class="button join" href="https://link.clashroyale.com/invite/clan/en?tag={{clan.tag}}"><span>{{strings.buttonJoinUs}}</span></a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </section>
        <section id="info">
            <div class="section-wrap">
                {% include 'current-war.html.j2' %}

                <article class="member-info">
                    <header>
                        <h3>
                            <span class="no-mobile">{{strings.sectionMemberTable}}:</span>
                            <span class="no-desktop">{{strings.sectionMemberTableMobile}}:</span>
                        </h3>
                        <div class="filters">
                            <input id="show-hidden-columns" class="toggle-button" type="checkbox" /><label for="show-hidden-columns">Details</label>
                            <label>
                                {{strings.labelFilter}}:
                                <select id="member-filter">
                                    <option value="none">{{strings.filterNone}}</option>
                                    <option value="leadership">{{strings.filterLeadership}}</option>
                                    <option value="role-elder">{{strings.filterRoleElder}}</option>
                                    <option value="role-member">{{strings.filterRoleMember}}</option>
                                    <option value="new">{{strings.filterNewMembers}}</option>
                                {% if current_war.state in ['collectionDay', 'warDay'] %}
                                    <option value="currentwar">{{strings.filterInCurrentWar}}</option>
                                {% endif %}
                                    <option value="activity">{{strings.filterInactive}}</option>
                                    <option value="danger">{{strings.filterDanger}}</option>
                                </select>
                            </label>
                        </div>
                    </header>

                    {% include 'member-table.html.j2' %}

                    <p>
                        <a href="#" class="button" data-role="dialog-show" data-target="members-old"><span class="no-mobile">{{strings.labelViewOldMembers}}</span><span class="no-desktop">{{strings.labelOldMembers}}</span></a>
                    </p>
                </article>

                <div class="row">
                    {% include 'leaderboards.html.j2' %}

                    <article id="suggestions">
                        <header>
                            <h3>{{strings.sectionSuggestions}}:</h3>
                        </header>
                        <div class="column">
                            <div class="list">
                                <ul>
                                {% for suggestion in suggestions %}
                                    <li>{{suggestion}}</li>
                                {% endfor %}
                                </ul>
                            </div>
                            <div class="info">
                                <p>{{strings.suggestionKick}}</p>
                                <p>{{strings.suggestionInactive.format(days_inactive=config.activity.threshold_kick)}}</p>
                                <p>
                                    {{strings.suggestionPromote.format(points=config.score.threshold_promote)}}
                                {% if config.activity.min_days_to_promote > 0 %}
                                    {{ strings.suggestionPromoteMinDays.format(config.activity.min_days_to_promote) }}
                                {% endif %}
                                </p>
                            </div>
                        </div>
                    </article>

                    <article>
                        <header>
                            <h3>{{strings.sectionScoring}}:</h3>
                        </header>
                        <p>{{strings.scoreBreakdown}}</p>
                        <h4>{{strings.scoreDonationLabel}}:</h4>
                        <p>{{strings.scoreDonationBreakdown.format(min_donations_daily=config.score.min_donations_daily, donations_zero=config.score.donations_zero)}}</p>

                        <h4>{{strings.scoreWarLabel}}:</h4>
                        <table class="rules">
                            <thead>
                                <tr>
                                    <th>{{strings.scoreRuleHeader}}:</th>
                                    <th>{{strings.labelYes}}:</th>
                                    <th>{{strings.labelNo}}:</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for rule in scoring_rules %}
                                <tr>
                                    <td>{{rule.name}}</td>
                                    <td class="yes"><strong class="{{rule.yes_status}}">{{"{0:+}".format(rule.yes)}}</strong></td>
                                    <td class="no"><strong class="{{rule.no_status}}">{{"{0:+}".format(rule.no)}}</strong></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </article>
                </div>
            </div>
        </section>
    </main>

    <footer><div class="inner">
        <ul>
            <li><a rel="external" target="_blank" href="https://github.com/AaronTraas/Clash-Royale-Clan-Tools">Github</a></li>
            <li><a rel="external" target="_blank" href="https://developer.clashroyale.com/">Clash Royale API</a></li>
        </ul>
        <a class="version {{ 'update-available' if config.crtools.update_available == True else '' }}" rel="external" target="_blank" href="https://pypi.org/project/crtools/">crtools {{config.crtools.version}}</a>

        <p class="disclaimer">
            {{strings.footerDisclaimer}}
        {% if config.paths.use_fankit == True %}
            <a href="https://supercell.com/fan-content-policy">{{strings.footerSeeContentPolicy}}</a>
        {% endif %}
        </p>
    </div></footer>

    <a class="github-fork-ribbon" target="_blank" href="https://github.com/AaronTraas/Clash-Royale-Clan-Tools" title="Fork me on GitHub">Fork me on GitHub</a>

    <div class="dialog-shadow"></div>
    {% include 'dialog-old-members.html.j2' %}
    {% include 'dialog-member-detail.html.j2' %}

    <script>
        (function() {
            var startTimestamp = new Date();
            var HALF_HOUR = 30 * 60 * 1000;
            var refreshInterval = null;
            var script_load_semaphor = 0;

            function refreshAfterHalfHour() {
                if((new Date()) - startTimestamp > HALF_HOUR) {
                    clearInterval(refreshInterval)
                    location.reload(true);
                }
            }

            function assetsDoneLoading() {
                if( script_load_semaphor > 1 ) {
                    --script_load_semaphor;
                    return;
                }

                var memberTable = document.getElementById('member-table');

                var tooltip = new TooltipManager();
                var memberFilter = new MemberTableFilter();
                var leaderboardFilter = new LeaderboardFilter();
                var dialogHandler = new DialogHandler();

                new Tablesort(memberTable);

                refreshInterval = setInterval(refreshAfterHalfHour, 3000)
            }

            function loadScript(script_url) {
                ++script_load_semaphor;
                var element = document.createElement( 'script' );
                element.setAttribute( 'src', script_url + '?version={{version}}' );
                element.onload = assetsDoneLoading;

                document.body.appendChild( element );
            }

            // delay startup of app until first render if possible.
            window.requestAnimationFrame( function() {
                loadScript('static/tablesort-with-number.min.js');
                loadScript('static/crtools.js');
            });
        })();
    </script>
</body>
</html>
