<div class="dialog-shadow"></div>
<dialog id="member">
    <header>
        <h1>Member Details</h1>
        <a data-role="close" href="#">Close</a>
    </header>
    <div class="inner">
    {% for member in members %}
        <div data-member-id="{{member.tag}}">
            <section class="identity">
                <h2>{{member.name}}</h2>
            </section>
            <h3>Player stats and info</h3>
            <section class="flex normal">
                <table width="100%">
                    <tr><th>{{strings.labelMemberTag}}</th><td>{{member.tag}}</td></tr>
                    <tr><th>{{strings.labelClanRole}}</th><td>{{member.role}}</td></tr>
                    <tr><th>{{strings.labelXpLevel}}</th><td>{{member.expLevel}}</td></tr>
                    <tr><th>{{strings.labelArena}}</th><td>{{member.arena.name}}</td></tr>
                    <tr><th>{{strings.labelMemberJoinDate}}</th><td>{{member.join_date_label}}</td></tr>
                    <tr><th>{{strings.labelMemberLastActivity}}</th><td>{{member.activity_date_label}}</td></tr>
                    <tr><th>{{strings.labelDaysInactive}}</th><td>{{member.days_inactive}}</td></tr>
                </table>
                <div>
                    <a href="https://royaleapi.com/player/{{member.tag | replace('#', '')}}" rel="external" target="_blank" class="button royaleapi">See on RoyaleAPI</a>
                    <a href="https://statsroyale.com/profile/{{member.tag | replace('#', '')}}" rel="external" target="_blank" class="button statsroyale">See on StatsRoyale</a>
                </div>
            </section>
        </div>
    {% endfor %}
    </div>
</dialog>
