<xf:set var="$v" value="{$xf.visitor}" />

<aside class="pkWC">
  <header class="pkWC-head">
    <h4 class="pkWC-title">Hoş geldiniz, {$xf.options.boardTitle}!</h4>
  </header>

  <div class="pkWC-user">
    <div class="pkWC-avatar">
      <xf:avatar user="$v" size="s" notooltip="true" />
    </div>

    <div class="pkWC-meta">
      <a href="{{ link('members', $v) }}" class="pkWC-name"><xf:username user="$v" rich="true" /></a>
      <div class="pkWC-role">
        {{ $v.user_id ? ($v.is_admin ? phrase('administrator') : ($v.is_moderator ? phrase('moderator') : phrase('member'))) : phrase('guest') }}
      </div>
      <xf:if is="$v.user_id">
        <div class="pkWC-joined">
          {{ phrase('joined') }}: <strong><xf:date time="{$v.register_date}" /></strong>
        </div>
      </xf:if>
    </div>
  </div>

  <ul class="pkWC-stats">
    <li>
      <span>İçeriklerim</span>
      <a class="pkWC-numLink" href="https://patilerkulubu.com/search/member?user_id={$v.user_id}">
        <strong>{$v.message_count|number}</strong>
      </a>
    </li>
    <li>
      <span>Tepki skoru</span>
      <a class="pkWC-numLink" href="https://patilerkulubu.com/account/reactions">
        <strong>{$v.reaction_score|number}</strong>
      </a>
    </li>
    <li>
      <span>Okunmamış mesajlar</span>
      <a class="pkWC-numLink" href="https://patilerkulubu.com/conversations">
        <strong>{$v.conversations_unread|number}</strong>
      </a>
    </li>
    <li>
      <span>Bildirimler</span>
      <a class="pkWC-numLink" href="https://patilerkulubu.com/account/alerts">
        <strong>{$v.alerts_unread|number}</strong>
      </a>
    </li>
  </ul>

  <xf:if is="$v.user_id">
    <a class="pkWC-cta" href="{{ link('account') }}">Hesabım</a>
  <xf:else />
    <div class="pkWC-ctaRow">
      <a class="pkWC-cta pkWC-cta--login" href="{{ link('login') }}">Giriş yap</a>
      <a class="pkWC-cta pkWC-cta--register" href="{{ link('register') }}">Kayıt ol</a>
    </div>
  </xf:if>

  <div class="pkWC-footer">
    <div class="pkWC-clock" data-live-clock>--:--:--</div>
    <xf:if is="$v.user_id">
      <div class="pkWC-last">
        Son etkinlik: <strong><xf:date time="{$v.last_activity}" /></strong>
      </div>
    </xf:if>
  </div>
</aside>

<script>
(function(){
  var el = document.querySelector('.pkWC [data-live-clock]');
  if(!el) return;
  function pad(n){ return (n<10?'0':'')+n; }
  function tick(){
    var d=new Date();
    el.textContent = pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());
  }
  tick(); setInterval(tick,1000);
})();
</script>

.pkWC {
  --wc-border: @xf-borderColorLight;
  --wc-muted: @xf-textColorMuted;
  background: linear-gradient(180deg, fade(@xf-paletteAccent1, 6%) 0%, fade(@xf-contentBg, 100%) 42%);
  border: 1px solid var(--wc-border);
  border-radius: @xf-borderRadiusLarge;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: 14px;
}

.pkWC-head { margin-bottom: 8px; }
.pkWC-title { margin: 0; font-weight: 800; font-size: 16px; }

.pkWC-user {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  padding: 12px 10px;
  background: @xf-contentBg;
  border: 1px solid var(--wc-border);
  border-radius: @xf-borderRadiusLarge;
}
.pkWC-avatar .avatar { width: 48px; height: 48px; }
.pkWC-avatar .avatar img { border-radius: 50%; }

.pkWC-meta { line-height: 1.35; }
.pkWC-name { margin-bottom: 2px; display: inline-block; font-weight: 800; font-size: 16px; }
.pkWC-role, .pkWC-joined { color: var(--wc-muted); font-size: 12px; margin-top: 2px; }

.pkWC-stats {
  list-style: none;
  margin: 12px 0 10px;
  padding: 0;
  border: 1px dashed var(--wc-border);
  border-radius: @xf-borderRadiusLarge;
}
.pkWC-stats li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px dashed var(--wc-border);
  font-size: 13px;
}
.pkWC-stats li:last-child { border-bottom: 0; }
.pkWC-stats span { color: var(--wc-muted); }

.pkWC-numLink { text-decoration: none; }
.pkWC-numLink strong { font-weight: 800; }
.pkWC-numLink:hover strong { text-decoration: underline; }

.pkWC-cta {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: @xf-buttonPrimary--background-color;
  color: @xf-buttonPrimary--color;
  border-radius: @xf-borderRadiusLarge;
  font-weight: 700;
  text-decoration: none;
}
.pkWC-cta:hover { opacity: .9; }

.pkWC-ctaRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pkWC-cta--login { background: @xf-buttonPrimary--background-color; color: @xf-buttonPrimary--color; }
.pkWC-cta--register { background: @xf-buttonAccent--background-color; color: @xf-buttonAccent--color; }

.pkWC-footer {
  background: fade(@xf-paletteNeutral1, 12%);
  border-radius: @xf-borderRadiusLarge;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--wc-muted);
  border: 1px solid var(--wc-border);
}
.pkWC-clock { font-size: 18px; font-weight: 800; margin-bottom: 6px; color: @xf-textColor; }

html[data-template="dark"] .pkWC { box-shadow: 0 10px 28px rgba(0,0,0,.35); }