@extends('layouts.master')
@section('background-image', '/assets/images/download.jpg')
@section('content')
    <div class="nk-header-title nk-header-title-xsm bg-transparent">
        <div class="nk-header-table">
            <div class="nk-header-table-cell">
                <div class="container">
                    <div class="nk-header-text">
                        <div class="d-flex flex-row justify-content-center">
                            <div class="nk-title d-flex justify-content-center">
                                <div class="clan-image" style="width: 64px;">
                                    <div class="clan-image-bg" style="background-image: url('/assets/images/clan/BG/BG_{{ $clan->MarkLayer01 }}.png')">
                                        <div class="clan-image-border" style="background-image: url('/assets/images/clan/OUTLINE/OUTLINE_{{ $clan->MarkLayer02 }}.png')">
                                            <div class="clan-image-logo" style="background-image: url('/assets/images/clan/SYMBOL/SYMBOL_{{ $clan->MarkLayer03 }}.png')"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h1 class="nk-title display-4 ml-10">
                                {{ $clan->detail->Clanname }}
                            </h1>
                        </div>
                        <h5>{!! strip_tags($clan->detail->Intro, "<font>") !!}</h5>
                        <div class="d-flex flex-row justify-content-between">
                            <div class="px-5 py-2">
                                <div class="text-warning text-uppercase"><strong>{{ __("clan.Leader") }}</strong></div>
                                <a href="{{ route("profile", $clan->MasterUsn) }}">{{ $clan->detail->MasterName }}</a>
                            </div>
                            <div class="px-5 py-2">
                                <div class="text-warning text-uppercase"><strong>{{ __("clan.Points") }}</strong></div>
                                {{ number_format($clan->ClanPoint) }}
                            </div>
                            <div class="px-5 py-2">
                                <div class="text-warning text-uppercase"><strong>{{ __("clan.Members") }}</strong></div>
                                {{ $clan->MemberCount }}
                            </div>
                            <div class="px-5 py-2">
                                <div class="text-warning text-uppercase"><strong>{{ __("clan.CreatedAt") }}</strong></div>
                                {{ $clan->writtenDate }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div class="row no-gutters">
                    <div class="col-md-12">
                        <div class="nk-box-1 bg-dark-2 block-border block-shadow">
                            <div class="nk-ibox">
                                <div class="nk-ibox-icon nk-ibox-icon-circle">
                                    <span class="ion-ios-people"></span>
                                </div>
                                <div class="row">
                                    @forelse ($clan->members as $member)
                                        <div class="col-lg-4 col-6 mt-10">
                                            <div class="bg-dark-2 block-border {{ $member->Grade == 3 ? "block-border-red" : ($member->Grade != 2 ? "block-border-yellow" : "block-border-green") }} block-shadow rounded mx-10 p-10">
                                                <a href="{{ route("profile", $member->MemberUsn) }}">{{ $member->Nick }}</a><br>
                                                <strong>{!! Helper::game_getClanGrade($member->Grade, true) !!}</strong>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-12 text-center">
                                            No members found yet.
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-gap-2"></div>
    </div>
@endsection