@if((!aktifIcerik?.sifre!=null) && ( girilenSifre == aktifIcerik?.sifre)){


@if (miSahip){
@if(girilenSifre != aktifIcerik?.sifre || (aktifIcerik?.sifre==null)){
@if(sifreKutusuGoster){
<nz-input-group nzPrefix="🔒"
                class="flex-1 w-full mb-1"
                nzSize="small">
    <input  placeholder="İçerik Şifresi" #sifreDegistir nz-input nzSize="small" type="password" autocomplete="new-password" aria-autocomplete="none" (keydown.enter)="tiklandiSifreDegistir(sifreDegistir.value);"/>
    <button nz-button
            nzType="text"
            nzShape="circle"
            nzSize="small"
            (click)="sifreKutusuGoster=false;CD.detectChanges();">❌</button>
</nz-input-group>
}@else{
<button class="mb-1"
        nz-button
        nzType="text"
        nzBlock
        (click)="sifreKutusuGoster=true;CD.detectChanges();">
    🔒 İçeriği Kilitle
</button>
}
} @else {
<nz-flex>
    <button class="mb-1"
            nz-button
            nzType="text"
            nzBlock
            (click)="girilenSifre=null;CD.detectChanges();">👁️
        Gizle</button>
    <button class="mb-1"
            nz-button
            nzType="text"
            nzBlock
            nz-popconfirm
            nzPopconfirmTitle="İçerik Şifresi Kaldırılacak. Bu İçeriği Kartı Görebilen Herkes Görebilecek. Eminmisiniz?"
            nzOkText="Kaldır"
            (nzOnConfirm)="tiklandiSifreKaldir(null);CD.detectChanges();">
        ❌Kilidi Kaldır
    </button>
</nz-flex>

}
}


<div class="medya p-shadow-6"
     #medyaIcerik
     [style.height]="aktifIcerik?.ek?._id && aktifIcerik?.ek?.turu !='YOUTUBE' && aktifIcerik?.ek?.turu !='REFERANS' && aktifIcerik?.ek?.turu !='UYARDOKUM' ? '20rem':'unset'">


    <div class="mesgul"
         *ngIf="aktifIcerik?.ek?.isleniyor?.evet">
        <div class="ui blue fast indeterminate progress">
            <div class="bar">
                <div class="progress"> Kart İçeriği İşleniyor </div>
            </div>
        </div>
        <div style="text-align: center;">İçerik %{{ aktifIcerik?.ek?.isleniyor?.yuzde }} İşlendi</div>
        <progress max="100"
                  [value]="aktifIcerik?.ek?.isleniyor?.yuzde ?? 0"
                  class="w-full"></progress>
        <!-- <mat-progress-bar mode="determinate" [value]="aktifIcerik?.ek?.isleniyor?.yuzde">
        </mat-progress-bar> -->
    </div>

    <!-- NOT:  İçerik Resim -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'RESIM' && !aktifIcerik?.ek?.isleniyor?.evet"
         class="icerik-resim">

        <img loading="lazy"
             [src]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?._id+'.resim?boyut=760x?&t=0'"
             loading="lazy" />
       


        <button type="button"
                title="Tam Ekran"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button>

        <span class="dosya-boyutu">{{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="image icon"></i>
        </span>
    </div>

    <!-- NOT:  icerikçerik Video -->

    <div *ngIf="aktifIcerik?.ek?.turu == 'VIDEO' && !aktifIcerik?.ek?.isleniyor?.evet"
         class="icerik-video">

        <img loading="lazy"
             alt="İçerik Resmi"
             style="height: 100%;object-fit: contain;"
             *ngIf="aktifMedya!=aktifIcerik?.ek?.id"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();"
             loading="lazy"
             [src]="FikoYT.fapiUrl+'/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?.id+'.dosya?boyut=240x?'">

        <img loading="lazy"
             class="play tuşu"
             src="./assets/resimler/play.svg"
             width="128"
             height="128"
             *ngIf="aktifMedya!=aktifIcerik?.ek?.id"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();"
             style="width: 32px;height:32px;position: absolute;margin-left: auto;margin-right: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;">


        <video controls
               *ngIf="aktifMedya==aktifIcerik?.ek?.id"
               autoplay
               [src]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?.id+'.dosya'"></video>

        <span class="dosya-boyutu">{{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="video icon"></i>
        </span>

    </div>

    <!-- NOT:  İçerik Ses -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'SES' && !aktifIcerik?.ek?.isleniyor?.evet"
         class="icerik-ses">

        <fikoyt-fiko-ses-oynatici [duraklatildi]="aktifMedya!=aktifIcerik?.ek?.id"
                                  (duraklatildiChange)="!$event ? aktifMedya=aktifIcerik?.ek?.id:aktifMedya=null;FikoYT.degisti.emit();"
                                  [url]="FikoYT.fapiUrl + '/fapiv1/fikoyt.com.FikoYT.sistem.dosyalar.'+aktifIcerik?.ek?.id+'.dosya'">
        </fikoyt-fiko-ses-oynatici>
        <!-- 
        <video controls
            [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.id+'.dosya'"></video>

        <button type="button" title="Tam Ekran" class="circular ui icon blue button tam-ekran-buton"
            (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button> -->

        <span class="dosya-boyutu">{{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="volume up icon"></i>
        </span>
    </div>

    <!-- NOT:  İçerik Dosya -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'DOSYA'"
         class="icerik-dosya">

        <a [href]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.id+'.dosya'"
           target="_blank"
           download="{{ aktifIcerik?.ek?.ismi }}">
            <div class="ui right green labeled animated fade icon button mini dosya-buton"
                 style="vertical-align: top;">
                <div class="visible content">
                    {{ aktifIcerik?.ek?.ismi }}
                </div>
                <div class="hidden content">
                    {{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}
                </div>
                <i class="download icon"></i>
            </div>
        </a>
        @if (aktifIcerik?.ek?.ismi.endsWith('.FikoWrl') ||
        aktifIcerik?.ek?.ismi.endsWith('.wrl') ){
        <!-- https://fikoyt.com/%F0%9F%A7%A9/%F0%9F%97%84%EF%B8%8F/%F0%9F%A7%8A?dosya_id=65953663ff54f1cf49a402c0 -->
        <a [routerLink]="['/🧩','🤖','🧊']"
           [queryParams]="{icerik_id: aktifIcerik?._id}"
           target="_blank">
            <button type="button"
                    class="ui circular mini icon button"
                    style="margin: 5px;">
                <img src="./assets/simgeler/3d.png"
                     style="width: 14px !important; height: 14px; object-fit: contain;">
            </button>
        </a>
        }

        <span class="dosya-boyutu">{{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="file outline icon"></i>
        </span>
    </div>



    <!-- NOT:  Youtube -->
    <div *ngIf="aktifIcerik?.ek?.turu =='YOUTUBE'"
         class="icerik-youtube">

        <img loading="lazy"
             alt="İçerik Resmi"
             style="width: 100%;height: 15rem;object-fit: cover;background: black;"
             *ngIf="aktifMedya!=aktifIcerik?.ek?.id"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();"
             loading="lazy"
             [src]="'https://img.youtube.com/vi/' + aktifIcerik?.ek?.yid  +'/0.jpg'">

        <img loading="lazy"
             class="play tuşu"
             src="./assets/resimler/play.svg"
             width="128"
             height="128"
             *ngIf="aktifMedya!=aktifIcerik?.ek?.id"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();"
             style="width: 32px;height:32px;position: absolute;margin-left: auto;margin-right: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;">

        <div class="youtubevid ui embed"
             data-source="youtube"
             [attr.data-id]="aktifIcerik?.ek?.yid"
             *ngIf="aktifMedya==aktifIcerik?.ek?.id">
            <!-- [attr.data-placeholder]="'https://img.youtube.com/vi/' + aktifIcerik?.ek?.yid  +'/0.jpg'"  data-icon="video" -->
        </div>

    </div>
    <!-- NOT:  UYAR_DOKUM -->
    <div *ngIf="aktifIcerik?.ek?.turu =='UYARDOKUM'"
         class="icerik-uyar-dokum">

        @let parametreler = parametreProxy(aktifIcerik.ek.parametreler ?? []);
        <!-- <pre>{{ (kart()?.veri?.icerikler ?? [])[0].ek.parametreler | json }}</pre> -->

        <paylas-uyar-kutusu class="pb-3"
                            #PaylasUyarKutusu
                            [(kart)]="kart"
                            [(icerik)]="aktifIcerik"
                            [rota]="aktifIcerik.ek.rota">
        </paylas-uyar-kutusu>


    </div>

    <!-- NOT:  Referans  -->
    <template #referansKonteynir></template>
    <!-- <div *ngIf="aktifIcerik?.ek?.turu =='REFERANS'" class="icerik-referans">

    </div> -->


    <!-- NOT:  İçerik FikoGL -->
    <div *ngIf="aktifIcerik?.ek?.turu == 'FIKOGL' || aktifIcerik?.ek?.turu == 'FIKOOPGL'|| aktifIcerik?.ek?.turu == 'FIKOOPGLv1'|| aktifIcerik?.ek?.turu == 'FIKOGLS'"
         class="icerik-resim">

        <img loading="lazy"
             [src]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.resimid+'.dosyaResim?boyut=240x?'" />

        <img loading="lazy"
             class="play tuşu"
             src="./assets/simgeler/3d.png"
             width="128"
             height="128"
             (click)="aktifMedya=aktifIcerik?.ek?.id;FikoYT.degisti.emit();tiklandiFikoGL(aktifIcerik)"
             style="width: 32px;height:32px;position: absolute;margin-left: auto;margin-right: auto;left: 50%;transform: translate(-50%, -50%);top: 50%;cursor:pointer;">


        <button type="button"
                title="Tam Ekran"
                class="circular ui icon blue button tam-ekran-buton"
                (click)="tiklandiIcerikTamEkran(medyaIcerik)">
            <i class="window maximize outline icon"></i>
        </button>

        <span class="dosya-boyutu">{{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="bezier curve icon"></i>
        </span>

    </div>

</div>


<!-- NOT:  İçerik Yapay Zeka -->
<!-- <div *ngIf="aktifIcerik?.ek?.turu == 'YAPAYZEKA'" class="icerik-Yz">

        <a [href]="FikoYT.fapiUrl + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.id+'.dosya'"
            target="_blank" download="{{ aktifIcerik?.ek?.ismi }}">
            <div class="ui right green labeled animated fade icon button mini dosya-buton" style="vertical-align: top;">
                <div class="visible content">
                    {{ aktifIcerik?.ek?.ismi }}
                </div>
                <div class="hidden content">
                    {{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}
                </div>
                <i class="download icon"></i>
            </div>
        </a>

        <span class="dosya-boyutu">{{okunabilirBoyut(aktifIcerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="file outline icon"></i>
        </span>
    </div> -->


@if(aktifIcerik?.html=='' && !aktifIcerik?.ek){
<div class="ui icon center aligned message"
     *ngIf="">
    <i class="exclamation triangle icon"></i>
    <div class="content">
        <div class="header">
            İçerik Hatalı
        </div>
        <p>Bu İçeriğe Ulaşılamıyor</p>
    </div>
</div>
}
<!-- <div #textEditor text-editable [innerHTML]="aktifIcerik?.html" class="aciklama-div"></div> -->

<!-- NOT:  Açıklama Bölümü -->
<fikoyt-paylas-text-editor [html]="aktifIcerik ? aktifIcerik.html:''"
                           [kaydetTusu]="true"
                           (htmlChange)="aktifIcerik ? aktifIcerik.html=$event:null;CD.detectChanges();"
                           [saltOkunur]="!editMode"
                           (tiklandiKaydet)="kaydetTiklandi($event);"
                           (click)="ciftTiklandiAciklama();">
</fikoyt-paylas-text-editor>
} @else {
<div class="ui icon center aligned message">
    <!-- <i class="lock triangle icon"></i> -->
    <div class="content">
        <div class="header">
            İçerik Şifreli
        </div>
        <p>
            <nz-input-group nzPrefix="🔒"
                            class="flex-1 w-full mb-1"
                            nzSize="small">
                <input  placeholder="İçerik Şifresi" nz-input nzSize="small" type="password" [(ngModel)]="girilenSifre" autocomplete="new-password" aria-autocomplete="none" (keydown.enter)="CD.detectChanges();"/>
                <button nz-button
                        nzType="text"
                        nzShape="circle"
                        nzSize="small"
                        (click)="girilenSifre=null;CD.detectChanges();">❌</button>
            </nz-input-group>
        </p>
    </div>
</div>
}

<div style="display: flex;justify-content: center;align-content: center; /*border-bottom: 1px solid silver;*/padding:3px;"
     [style.display]="icerikler.length<=1 ? 'none':'flex'">


    <div class="circular ui icon blue mini button"
         title="ilk Sayfa"
         [style.visibility]="icerikler.length>3 ? 'visible':'hidden'"
         [class.disabled]="aktifIcerikNo < 1"
         (click)="aktifIcerikNo=0;"
         style="margin-right: auto;">
        <i class="angle double left icon"></i>
    </div>


    <div class="circular ui icon blue mini button"
         title="Önceki Sayfa"
         [class.disabled]="aktifIcerikNo < 1"
         (click)="aktifIcerikNo=aktifIcerikNo-1;">
        <i class="angle left icon"></i>
    </div>


    <a class="ui medium orange label">
        {{ (aktifIcerikNo+1)+' / '+ icerikler.length}}
    </a>

    <div class="circular ui icon blue mini button"
         title="Sonraki Sayfa"
         [class.disabled]="aktifIcerikNo + 1 > icerikler.length-1"
         (click)="aktifIcerikNo=aktifIcerikNo+1;">
        <i class="angle right icon"></i>
    </div>

    <div class="circular ui icon blue mini button"
         title="Son Sayfa"
         [style.visibility]="icerikler.length>3 ? 'visible':'hidden'"
         style="margin-left: auto;"
         [class.disabled]="aktifIcerikNo + 1 > icerikler.length-1"
         (click)="aktifIcerikNo=icerikler.length-1;">
        <i class="angle double right icon"></i>
    </div>

</div>