@if (!icerik?.sifre && icerik?.sifre!=''){
<button class="mb-1"
        nz-button
        nzType="text"
        nzBlock
        (click)="icerik.sifre='';CD.detectChanges();">🔒 İçeriği
    Kilitle</button>
} @else {
<nz-input-group nzPrefix="🔒"
                class="flex-1 w-full mb-1"
                nzSize="small">
    <input  placeholder="İçerik Şifresi" nz-input nzSize="small" type="password" [(ngModel)]="icerik.sifre" autocomplete="new-password" aria-autocomplete="none" />
    <button nz-button
            nzType="text"
            nzShape="circle"
            nzSize="small"
            (click)="icerik.sifre=null;CD.detectChanges();">❌</button>
</nz-input-group>

}

@if (!icerik?.ek && !saltOkunur){
<div style="border: 1px gray dashed;text-align: center;margin-bottom: 0.5rem;"
     class="border-round-xs">
    <button type="button"
            class="ui circular blue mini icon button"
            (click)="fikoEkInput.value='';CD.detectChanges();fikoEkInput.click();"
            style="margin: 5px;">
        <i class="plus icon"
           style="margin: unset;"></i>
    </button>

    <button type="button"
            class="ui circular mini icon button"
            [routerLink]="['/🧩','🤖','🧊']"
            style="margin: 5px;">
        <img src="./simgeler/3d.png"
             style="width: 14px !important; height: 14px; object-fit: contain;">
    </button>

    <!-- <button type="button" class="ui circular mini icon button" [routerLink]="['/🧩','🤖','🧊']" style="margin: 5px;"> -->
    <img src="./simgeler/ai.png"
         style="width: 32px !important; height: 32px; object-fit: contain;"
         (click)="icerik.ek = yapayZekaEkle();CD.detectChanges();">
    <!-- </button> -->

    <button type="button"
            class="ui circular blue mini icon button"
            (click)="icerik.ek = youtubeEkle();CD.detectChanges();"
            style="margin: 5px;">
        <i class="youtube icon"
           style="margin: unset;"></i>
    </button>

    <!-- <fikoyt-firkod-okuyucu #FirKodOkuyucu></fikoyt-firkod-okuyucu> -->

    <!-- <button type="button" class="ui circular primary mini button" (click)="FirKodOkuyucu.ac();CD.detectChanges();"
        style="margin: 5px;">
        <i class="qr code icon" style="margin: unset;"></i>
    </button> -->

    <!-- <button pButton pRipple type="button" icon="pi pi-youtube" class="p-button-info p-mx-2" pRipple
        (click)="fikoEkInput.value='';fikoEkInput.click();"></button>

    <button pButton pRipple type="button" icon="pi pi-map" class="p-button-info p-mx-2" pRipple
        (click)="fikoEkInput.value='';fikoEkInput.click();"></button> -->

    <!-- <button pButton pRipple type="button" icon="pi pi-map-marker" title="Konum Etiketle"
        class="p-button-info p-mx-2" pRipple></button> -->
</div>
}
<!-- NOT: İçerikler Burada Yer Alıcak -->
<input #fikoEkInput type='file' accept="*/*" (change)="secildiDosya($event)" style="display: none;">

<div class="medya p-shadow-6"
     #medyaIcerik
     [style.height]="icerik?.ek?.dosya ? '25rem':'unset'">


    <!-- NOT:  İçerik Resim -->
    @if(icerik?.ek?.dosya?.type?.startsWith('image')){
    <div class="icerik-resim">

        <img #Deneme
             *ngIf="icerik?.ek?.dosyaObjectUrl"
             [src]="icerik?.ek?.dosyaObjectUrl"
             (click)="tiklandiSiniflandir($event.target)" />

        @if( !saltOkunur){


        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                nz-wave
                nz-popconfirm
                nzPopconfirmTitle="İçerik Eki Silinecek Eminmisiniz?"
                nzOkText="Evet"
                nzCancelText="İptal"
                nzOkDanger
                (nzOnConfirm)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>
        }
        <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(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="image icon"></i>
        </span>
    </div>
    }
    <!-- NOT:  icerikçerik Video -->
    @if(icerik?.ek?.dosya?.type?.startsWith('video')){
    <div class="icerik-video">

        <video *ngIf="icerik?.ek?.dosyaObjectUrl"
               controls
               [src]="icerik?.ek?.dosyaObjectUrl"></video>

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                (click)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <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(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="video icon"></i>
        </span>
    </div>
    }
    <!-- NOT:  İçerik Ses -->
    @if(icerik?.ek?.dosya?.type?.startsWith('audio')){
    <div class="icerik-ses">

        <video *ngIf="icerik?.ek?.dosyaObjectUrl"
               controls
               [src]="icerik?.ek?.dosyaObjectUrl"></video>

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                (click)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <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(icerik?.ek?.boyut)}}</span>

        <span class="dosya-turu">
            <i class="volume up icon"></i>
        </span>
    </div>
    }
    <!-- NOT:  İçerik Dosya -->
    @if(icerik?.ek?.turu === 'DOSYA'){
    <div class="icerik-dosya">

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                (click)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <div class="ui right green labeled animated fade icon button mini dosya-buton"
             style="vertical-align: top;">
            <div class="visible content">
                {{ icerik?.ek?.ismi }}
            </div>
            <div class="hidden content">
                {{okunabilirBoyut(icerik?.ek?.boyut)}}
            </div>
            <i class="download icon"></i>
        </div>

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

        <span class="dosya-turu">
            <i class="file outline icon"></i>
        </span>
    </div>
    }
    <!-- NOT:  Youtube -->
    @if(icerik?.ek?.turu === 'YOUTUBE'){
    <div class="icerik-youtube">

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

        <div class="ui input">
            <input type="text" #inputyid (keydown.enter)="icerik.ek = youtubeEkle(inputyid.value);CD.detectChanges();"
                *ngIf="!icerik?.ek?.yid" placeholder="Youtube Video Kimliği">
        </div>

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                (click)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <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>
    </div>
    }

    <!-- NOT:  FikoGL 3d -->
    @if(icerik?.ek?.turu=='FIKOGL' || icerik?.ek?.turu=='FIKOGLS' || icerik?.ek?.turu=='FIKOOPGL'||
    icerik?.ek?.turu=='FIKOOPGLv1'){
    <div class="icerik-fikogl">

        <img [src]="icerik.ek.resimObjectUrl ? icerik.ek.resimObjectUrl:'./resimler/3d-printer.png'" />

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                (click)="tiklandiEkSil($event)"
                *ngIf="!saltOkunur">
            <i class="icon trash"></i>
        </button>

        <button type="button"
                title="Resim Çek"
                class="circular ui icon blue button"
                style="position: absolute;right: 50%;bottom: 0;color: white;transform: translateX(50%);"
                (click)="tiklandiFikoGL(icerik.ek.dosya, true)">
            <i class="camera retro icon"></i>
        </button>

        <button class="circular ui icon blue mini button  tam-ekran-buton"
                title="FikoGL İle Aç"
                (click)="tiklandiFikoGL(icerik.ek.dosya)"
                style="padding: 5px !important;">
            <img src="./simgeler/3d.png"
                 style="width: 22px !important; height: 22px; object-fit: contain;">
        </button>

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

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

    </div>
    }

    <!-- NOT:  Referans -->
    @if(icerik?.ek?.turu === 'REFERANS'){
    <div class="icerik-referans">

        <div *ngIf="icerik?.ek?.rid">
            <fikoyt-kart [kart]="icerik?.ek?.rid"
                         [miReferans]="true"></fikoyt-kart>
        </div>

        <div class="ui input">
            <input type="text" #inputrid (keydown.enter)="icerik.ek = referansEkle(inputrid.value);CD.detectChanges();"
                *ngIf="!icerik?.ek?.rid" placeholder="Kart Referans Kimliği">
        </div>

        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                (click)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

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

    <!-- NOT:  Yapay Zeka -->
    @if(icerik?.ek?.turu === 'YAPAYZEKA'){
    <div class="icerik-yz fadein animation-duration-500">

        <img src="./simgeler/ai.jpg"
             (click)="tiklandiSiniflandir($event.target)"
             class="arka-plan" />


        <fiko-yapay-zeka [(ek)]="icerik.ek"></fiko-yapay-zeka>
        <!-- @switch (icerik?.ek?.yz) {
        @default {
        <div class="komut-liste">
            <button nz-button nzGhost nzBlock class="mb-2"
                (click)="icerik.ek.yz='YazıdanResme';CD.detectChanges();">Yazı'dan Resim'e</button>
            <button nz-button nzGhost nzBlock class="mb-2">Resim'den Yazı'ya</button>
            <button nz-button nzGhost nzBlock class="mb-2">Yüz Değiştir</button>
            <button nz-button nzGhost nzBlock class="mb-2">Yapay Sohbet</button>
        </div>
        }
        @case ("YazıdanResme") {
        <div class="komut-liste">
            <div>
                <img nz-image width="10em" height="10em" style="width: 13em;height: 13em;" class="mb-1"
                    nzSrc="/simgeler/besgen-vektor.png" alt="" />
            </div>
            <nz-tag nzColor="success">Resmi Anlatın</nz-tag>
            <textarea rows="2" nz-input nzSize="small" [nzAutosize]="false" style=" resize: none;"></textarea>
            <div style="text-align: right;">
                <button nz-button nzType="primary" nzSize="small" nzLoading="false">Üret</button>
            </div>
        </div>
        }

        } -->



        <button type="button"
                title="İçeriği Sil"
                class="circular ui icon red button sil-buton"
                (click)="tiklandiEkSil($event)">
            <i class="icon trash"></i>
        </button>

        <span class="dosya-boyutu"
              (click)="icerik.ek.yz=null;CD.detectChanges();">Yapay Zeka</span>

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

<!-- <div class="ui divider" style="margin-top: 0.25rem;margin-bottom: 0.25rem;"></div> -->

<!-- NOT:  Açıklama Bölümü -->
<fikoyt-paylas-text-editor [(html)]="icerik.html"
                           (htmlChange)="icerik.html=$event;CD.detectChanges();"
                           [saltOkunur]="saltOkunur"
                           *ngIf="icerik"
                           (paste)="tetiklendiYapistir($event)"
                           (drop)="tetiklendiDrop($event)">
</fikoyt-paylas-text-editor>

<!-- BİLGİ: İçerik Editör /Son -->

<pre>
{{ sonuc | json }}
</pre>