{data.video.title}

{data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured ? " · featured" : ""}

{$_("admin.common.title_field")}

{$_("admin.common.slug_field")}

{$_("admin.video_form.description")}

</div>

<div class="space-y-1.5">
        <Label>{$_("admin.common.cover_image")}</Label>
        {#if imageId}
          <img
            src={getAssetUrl(imageId, "thumbnail")}
            alt=""
            class="h-24 rounded object-cover mb-2"
          />
        {/if}
        <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
      </div>

<div class="space-y-1.5">
        <Label>{$_("admin.video_form.video_file")}</Label>
        {#if movieId}
          <video
            src={getAssetUrl(movieId)}
            poster={imageId ? (getAssetUrl(imageId, "preview") ?? undefined) : undefined}
            controls
            class="w-full rounded-lg bg-black max-h-72 mb-2"
          >
            <track kind="captions" />
          </video>
        {/if}
        <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
      </div>

<div class="space-y-1.5">
        <Label>{$_("admin.common.tags")}</Label>
        <TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
      </div>

<div class="space-y-1.5">
        <Label>{$_("admin.common.publish_date")}</Label>
        <DatePicker
          bind:value={uploadDate}
          placeholder={$_("admin.common.publish_date")}
          showTime={false}
        />
      </div>

<div class="flex gap-6">
        <label class="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" bind:checked={premium} class="rounded" />
          <span class="text-sm">{$_("admin.common.premium")}</span>
        </label>
        <label class="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" bind:checked={featured} class="rounded" />
          <span class="text-sm">{$_("admin.common.featured")}</span>
        </label>
      </div>

{#if data.models.length > 0}
        <div class="space-y-1.5">
          <Label>{$_("admin.video_form.models")}</Label>
          <Select type="multiple" bind:value={selectedModelIds}>
            <SelectTrigger class="w-full bg-background/50 border-primary/20">
              {#if selectedModelIds.length}
                {$_("admin.video_form.models_selected", {
                  values: { count: selectedModelIds.length },
                })}
              {:else}
                <span class="text-muted-foreground">{$_("admin.video_form.no_models")}</span>
              {/if}
            </SelectTrigger>
            <SelectContent>
              {#each data.models as model (model.id)}
                <SelectItem value={model.id}>
                  {#if model.avatar}
                    <img
                      src={getAssetUrl(model.avatar, "mini")}
                      alt=""
                      class="h-5 w-5 rounded-full object-cover shrink-0"
                    />
                  {/if}
                  {model.artist_name}
                </SelectItem>
              {/each}
            </SelectContent>
          </Select>
        </div>
      {/if}

<Button
        onclick={handleSubmit}
        disabled={saving}
        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
      >
        {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
      </Button>
    </CardContent>
  </Card>
</div>