<.simple_form :let={f} for={@changeset} action={@action}>
  <.error :if={@changeset.action}>
    Oops, something went wrong! Please check the errors below.
  </.error>

  <section x-data="{ selectedPreset: null }">
    <h3 class="my-4 text-2xl text-black dark:text-white">
      Use a Preset
    </h3>
    <section x-data="{ selection: null }">
      <.input
        prompt="Select preset"
        name="media_profile_preset"
        value=""
        options={preset_options()}
        type="select"
        x-model="selection"
        inputclass="w-full"
        help="You can further customize the settings after selecting a preset. This is just a starting point"
      >
        <.button
          class="h-13 w-2/5 lg:w-1/5 ml-2 md:ml-4"
          rounding="rounded"
          type="button"
          x-on:click="selectedPreset = selection; selection = null"
          x-bind:disabled="!selection"
        >
          <span x-text="selection ? 'Load' : 'Select'">Select</span><span class="hidden lg:inline ml-1">Preset</span>
        </.button>
      </.input>
    </section>

    <h3 class="mt-8 text-2xl text-black dark:text-white">
      General Options
    </h3>

    <section x-data="{ 
        presets: { 
          default: 'Default',
          media_center: 'TV Shows',
          audio: 'Audio',
          archiving: 'Archiving'
        }
    }">
      <.input
        field={f[:name]}
        type="text"
        label="Name"
        placeholder="New Profile"
        help="Something descriptive. Does not impact indexing or downloading (required)"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <section x-data={"{ 
        presets: { 
          default: '#{default_output_template()}',
          media_center: '#{media_center_output_template()}',
          audio: '#{audio_output_template()}',
          archiving: '#{default_output_template()}'
        }
    }"}>
      <.input
        field={f[:output_path_template]}
        type="text"
        inputclass="font-mono"
        label="Output path template"
        help="Must end with .{{ ext }}. See below for more details. The default is good for most cases (required)"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Subtitle Options
    </h3>

    <section x-data="{ presets: { default: true, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:download_subs]}
        type="toggle"
        label="Download Subtitles"
        help="Downloads subtitle files alongside media file"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: false, media_center: false, audio: false, archiving: false } }">
      <.input
        field={f[:download_auto_subs]}
        type="toggle"
        label="Download Autogenerated Subtitles"
        help="Prefers normal subs but will download autogenerated if needed. Requires 'Download Subtitles' to be enabled"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: true, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:embed_subs]}
        type="toggle"
        label="Embed Subtitles"
        help="Downloads and embeds subtitles in the media file itself, if supported. Uneffected by 'Download Subtitles' (recommended)"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: 'en', media_center: 'en', audio: '', archiving: 'all' } }">
      <.input
        field={f[:sub_langs]}
        type="text"
        label="Subtitle Languages"
        help="Use commas for multiple languages (eg: en,de)"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Thumbnail Options
    </h3>

    <section x-data="{ presets: { default: true, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:download_thumbnail]}
        type="toggle"
        label="Download Thumbnail"
        help="Downloads thumbnail alongside media file"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: true, media_center: true, audio: true, archiving: true } }">
      <.input
        field={f[:embed_thumbnail]}
        type="toggle"
        label="Embed Thumbnail"
        help="Downloads and embeds thumbnail in the media file itself, if supported. Uneffected by 'Download Thumbnail' (recommended)"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Metadata Options
    </h3>

    <section x-data="{ presets: { default: false, media_center: false, audio: false, archiving: true } }">
      <.input
        field={f[:download_metadata]}
        type="toggle"
        label="Download Metadata"
        help="Downloads metadata file alongside media file"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: true, media_center: true, audio: true, archiving: true } }">
      <.input
        field={f[:embed_metadata]}
        type="toggle"
        label="Embed Metadata"
        help="Downloads and embeds metadata in the media file itself, if supported. Uneffected by 'Download Metadata' (recommended)"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Release Format Options
    </h3>

    <section x-data="{ presets: { default: 'include', media_center: 'exclude', audio: 'exclude', archiving: 'include' } }">
      <.input
        field={f[:shorts_behaviour]}
        options={friendly_format_type_options()}
        type="select"
        label="Include Shorts"
        help="Experimental. Please report any issues on GitHub"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: 'exclude', media_center: 'exclude', audio: 'exclude', archiving: 'include' } }">
      <.input
        field={f[:livestream_behaviour]}
        options={friendly_format_type_options()}
        type="select"
        label="Include Livestreams"
        help="Excludes media that comes from a past livestream"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Quality Options
    </h3>

    <section x-data="{ presets: { default: '1080p', media_center: '1080p', audio: 'audio', archiving: '2160p' } }">
      <.input
        field={f[:preferred_resolution]}
        options={friendly_resolution_options()}
        type="select"
        label="Preferred Resolution"
        help="Will grab the closest available resolution if your preferred is not available. 'Audio Only' grabs the highest quality m4a"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <h3 class="mt-8 text-2xl text-black dark:text-white">
      Media Center Options
    </h3>
    <p class="text-sm mt-2 max-w-prose">
      Everything in this section is experimental - please open a GitHub issue if you see something odd.
      <strong>
        These options only work if this Media Profile's output template is set to split media into seasons.
      </strong>
      Try the "Media Center" preset if you're not sure.
    </p>

    <section
      phx-click={show_modal("upgrade-modal")}
      x-data="{ presets: { default: false, media_center: true, audio: false, archiving: false } }"
    >
      <.input
        field={f[:download_nfo]}
        type="toggle"
        label="Download NFO data"
        label_suffix="(pro)"
        help="Downloads NFO data alongside media file for use with Jellyfin, Kodi, etc."
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: false, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:download_source_images]}
        type="toggle"
        label="Download Series Images"
        help="Downloads poster and banner images for use with Plex, Jellyfin, Kodi, etc. Only works for full channels (not playlists)"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <.button class="my-10 sm:mb-7.5 w-full sm:w-auto" rounding="rounded-lg">Save Media profile</.button>
  </section>

  <div class="rounded-sm dark:bg-meta-4 p-4 md:p-6 mb-5">
    <.output_template_help />
  </div>
</.simple_form>
