@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' ? '15rem':'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 + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.id+'.resim?boyut=240x?'"
            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+'/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.id+'.videothumb?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 + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+aktifIcerik?.ek?.id+'.video'"></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 + '/fikoyt.com.FikoYT.sistem.aktifKullanici.hareketler.'+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:  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>