<div class="dialog-shadow"></div>
<dialog id="member">
    <header>
        <h1>{{strings.dialogTitleMemberDetails}}</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}}
                    <small>{{member.tag}}</small>
                </h2>
                <div>
                    <h3 class="xp-level">{{member.expLevel}}</h3>
                    <h3 class="trophies">{{member.trophies}}</h3>
                </div>

                <figure class="arena-league {{member.arenaLeague}}">
                    <figcaption>{{member.arenaLeagueLabel}}</figcaption>
                </figure>

            </section>
            <h3>{{strings.dialogLabelPlayerStats}}</h3>
            <section class="flex normal">
                <div class="attribute-list">
                    <dl>
                        <dt>{{strings.labelClanRole}}</dt>
                        <dd>{{member.role_label}}</dd>
                    </dl>
                    <dl>
                        <dt>{{strings.labelMemberJoinDate}}</dt>
                        <dd>{{member.join_date_label}}</dd>
                    </dl>
                    <dl>
                        <dt>{{strings.labelMemberLastActivity}}</dt>
                        <dd>
                            {{member.activity_date_label}}<br />
                            {% if member.days_inactive > 1 %}
                                ({{member.days_inactive}} days)
                            {% else %}
                                (Today)
                            {% endif %}
                        </dd>
                    </dl>
                </div>
                <div>
                    <a href="https://royaleapi.com/player/{{member.tag | replace('#', '')}}" rel="external" target="_blank" class="button royaleapi"><span>{{config.strings.dialogMemberRoyaleApi}}</span></a>
                    <a href="https://statsroyale.com/profile/{{member.tag | replace('#', '')}}" rel="external" target="_blank" class="button statsroyale"><span>{{config.strings.dialogMemberStatsRoyale}}</span></a>
                </div>
            </section>
        </div>
    {% endfor %}
    </div>
</dialog>
