@if (FikoYT.kimlik.aktifKullaniciJson()) {
<div style="line-height: 0.5;">


    <div class="ui cards"
         style="display: block;">
        <div class="ui card p-2"
             style="display: flex;column-gap: 6px;flex-direction: row;width:auto;">
            <fikoyt-yuvarlak-resim [size]="42"
                                   [image]="FikoYT.env.adres.fapiUrl+'/fikoyt.com.FikoYT.sistem.aktif-kullanici.profilResmi?boyut=128x?&t='+FikoYT.parametreler['t']+'&quality=40'"
                                   [isImageVisible]="true"
                                   [borderSize]="5"></fikoyt-yuvarlak-resim>
            <div style="flex: 1;">
                <div class="primary"
                     style="display: flex; align-items: center; padding-left: 4px; font-weight: bold; text-overflow: ellipsis;width:100%">
                    <h4 class="ui header m-0"
                        nz-typography> {{ FikoYT.kimlik.aktifKullaniciJson().isim }} {{
                        FikoYT.kimlik.aktifKullaniciJson().soyIsim
                        }}
                    </h4>
                    <button class="circular ui basic icon mini button"
                            style="margin-left: auto; padding: 3px;"> fikri007 </button>
                </div>


                <div class="meta"
                     style="margin: 0.2em;">


                    <div class="ui {{true ? 'green':'red'}} tiny label"
                         [title]="true ? 'İnternete Bağlı':'İnternete Bağlı Değil'"
                         style="color: white !important;">
                        <i class="wifi icon"></i> <i class="{{true ? 'check':'close'}} icon"></i>
                    </div>

                    <div class="ui {{FikoYT.io.bagli() ? 'green':'red'}} tiny label"
                         [title]="FikoYT.io.bagli() ? 'Sisteme Bağlı':'Sisteme Ulaşılamıyor'"
                         style="color: white !important;">
                        <i class="server icon"></i> <i class="{{FikoYT.io.bagli() ? 'check':'close'}} icon"></i>
                    </div>

                    <div class="ui primary tiny label"
                         style="color: white !important;">
                        <i class="desktop icon"></i> {{ FikoYT.kimlik.cihazlar().desktop }}
                    </div>

                    <div class="ui primary tiny label"
                         style="color: white !important;">
                        <i class="mobile alternate icon"></i> {{ FikoYT.kimlik.cihazlar().mobile }}
                    </div>

                    <div class="ui primary tiny label"
                         style="color: white !important;">
                        <i class="microchip icon"></i> {{ FikoYT.kimlik.cihazlar().tablet }}
                    </div>

                    <div class="ui primary tiny label"
                         style="color: white !important;">
                        <i class="watchman monitoring icon"></i> {{ FikoYT.kimlik.cihazlar().machine }}
                    </div>

                </div>

            </div>

        </div>


    </div>

    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em;">

        <div class="ui cards profil"
             style="margin-top: unset; max-width: 300px; flex: 1;width: 155px;">
            <div class="card"
                 style="margin-bottom: 0.5em;color:initial;">
                <div class="content p-1">
                    <div class="primary"
                         style="display: flex;align-items: center;padding-left: 4px;font-weight: bold;line-height: initial;">
                        Görevlerim
                    </div>
                    <div class="meta">
                        <button class="ui basic mini button"
                                style="padding: 5px;border-radius: 50vh;box-shadow: none;">
                            <i class="icon globe"></i>
                            15 Aktif Görev
                        </button>
                    </div>
                    <meter min="0"
                           low="10"
                           optimum="50"
                           high="90"
                           max="100"
                           value="35"
                           style="width: 100%;"></meter>
                </div>
            </div>
        </div>

        <div class="ui cards profil"
             style="margin-top: unset; max-width: 300px; flex: 1;width: 155px;">
            <div class="card"
                 style="margin-bottom: 0.5em;color:initial;">
                <div class="content p-1">
                    <div class="primary"
                         style="display: flex;align-items: center;padding-left: 4px;font-weight: bold;line-height: initial;">
                        Sorular
                    </div>
                    <div class="meta">
                        <button class="ui basic mini button"
                                style="padding: 5px;border-radius: 50vh;box-shadow: none;">
                            <i class="icon globe"></i>
                            3 Cevaplanmış Soru
                        </button>
                    </div>
                    <meter min="0"
                           low="10"
                           optimum="50"
                           high="90"
                           max="100"
                           value="35"
                           style="width: 100%;"></meter>
                </div>
            </div>
        </div>

    </div>
    <div class="mt-3"
         style="display: flex;row-gap: 5px;column-gap: 5px;justify-content: space-between; ">
        <!-- <div class="ui cards profil" style="margin-top:0;max-width: 64px;" [routerLink]="['/uye','ana-sayfa']">
            <div class="card cursor-pointer">
                <div class="content"
                    style="display: flex;flex-direction: column;line-height: normal;align-items: center;text-align: center;font-size:0.7em;">
                    <i class="icon globe"
                        style="font-size: 32px;width: 32px;height: 32px;margin-bottom: 0.1em;color:silver;"></i>

                    <div>
                        Ana Sayfa
                    </div>
                </div>

            </div>
        </div> -->

        <button class="basic ui button w-4rem h-5rem m-0 hoverable hover:zipla-5 active:zipla-5"
                routerLinkActive='orange'
                [routerLinkActiveOptions]="{exact: false}"
                [routerLink]="['/👨','🏠']">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <i class="icon globe mb-1"
                   style="font-size: 24px;width: 24px;height: 24px;"></i>
                <span class="text-xs ">Ana Sayfa</span>
            </div>
        </button>

        <button class="basic ui button w-4rem h-5rem m-0 hoverable hover:zipla-5 active:zipla-5"
                routerLinkActive='orange'
                [routerLinkActiveOptions]="{exact: false}"
                [routerLink]="['/👨/👨/👪']">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <i class="icon user secret mb-1"
                   style="font-size: 24px;width: 24px;height: 24px;"></i>
                <span class="text-xs">Arkadaşlar</span>
            </div>
        </button>

        <button class="basic ui button w-4rem h-5rem m-0 hoverable hover:zipla-5 active:zipla-5"
                routerLinkActive='orange'
                [routerLink]="['/👨/👨/🚨']">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <i class="icon bell outline mb-1"
                   style="font-size: 24px;width: 24px;height: 24px;"></i>
                <span class="text-xs">Bildirimler</span>
            </div>
        </button>

        <button class="basic ui button w-4rem h-5rem m-0 hoverable hover:zipla-5 active:zipla-5"
                routerLinkActive='orange'
                [routerLink]="['/🧍','💬']">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <i class="icon envelope outline mb-1"
                   style="font-size: 24px;width: 24px;height: 24px;"></i>
                <span class="text-xs">Mesajlarım</span>
            </div>
        </button>

        <button class="basic ui button w-4rem h-5rem m-0 hoverable hover:zipla-5 active:zipla-5"
                routerLinkActive='orange'
                [routerLink]="['/🧍','🔨']">
            <div style="display: flex;flex-direction: column;align-items: center;">
                <i class="icon cogs mb-1"
                   style="font-size: 24px;width: 24px;height: 24px;"></i>
                <span class="text-xs">Ayarlarım</span>
            </div>
        </button>


    </div>


    <!-- NOT: Üst Merkez Bölmesi Orta Kısım -->
    <div class="mt-3"
         style="display: flex;row-gap: 5px;column-gap: 5px;justify-content:right; ">

        <div class="ui tiny text "
             style="color: initial;flex:1;">
            {{ FikoYT.kimlik.aktifKullaniciJson()?.ePosta }}

        </div>

        <div class="ui right red labeled animated fade icon circular button mini mt-2 mb-2"
             (click)="tiklandiCikisYap();">
            <div class="visible content">
                Çıkış Yap
            </div>
            <div class="hidden content">
                Yine Bekleriz
            </div>
            <i class="sign in alternate icon"></i>
        </div>
    </div>

</div>
}@else {
<div class="p-2"
     style="color: initial;;">
    <div class="center">

        <fikoyt-yuvarlak-resim [size]="100"
                               [image]="FikoYT.env.adres.sunucuUrl+'/users.png'"
                               [isImageVisible]="true"
                               [borderSize]="20"></fikoyt-yuvarlak-resim>
    </div>

    <form>
        <span class="ui inverted text">Kullanıcı Adı :</span>
        <nz-input-group nzPrefix="👨"
                        nzSize="small">
            <input type="text" autocomplete="username"  nz-input placeholder="Kullanıcı Adı"  [(ngModel)]="form.kullaniciAdi"  [ngModelOptions]="{standalone: true}"/>
        </nz-input-group>


        <span class="ui inverted text">Parola :</span>
        <nz-input-group nzPrefix="🔑"
                        nzSize="small">
            <input type="password"  autocomplete="current-password" nz-input placeholder="Parola"  [(ngModel)]="form.parola"  [ngModelOptions]="{standalone: true}"/>
        </nz-input-group>
    </form>
    <div class="ui fluid right blue labeled animated fade icon circular button mini mt-2 mb-2"
         (click)="this.FikoYT.kimlik.girisYap(this.form);">
        <div class="visible content">
            Hemen Giriş Yap
        </div>
        <div class="hidden content">
            Herkes Seni Bekliyor
        </div>
        <i class="sign in alternate icon"></i>
    </div>

    <div class="ui inverted divider"></div>
    <div style="flex-direction: row;display: flex;">
        <span nz-wave
              routerLink="/👨/♻"
              nzType="link">🔓 Şifre Sıfırla</span>
        <span style="flex: 1;"></span>
        <span nz-wave
              routerLink="/👨/👤"
              nzType="link">🙌 Aramıza Katıl</span>
    </div>

</div>

}