<turbo-stream action="replace" target="fs_album_3"><template>
<div id="fs_album_3" class="accordion-item">
  <h2 class="accordion-header">
    <button
      type="button"
      class="accordion-button"
      data-bs-toggle="collapse"
      data-bs-target="#collapse_fs_album_3"
      data-action="organizer#activateAlbum"
      data-organizer-album-id-param="3"
    >
      Gershwin, Ravel - Helene Grimaud - Piano Concertos
      
    </button>
  </h2>
  <div
    id="collapse_fs_album_3"
    class="accordion-collapse collapse show"
    data-controller="fs--album album"
    data-action="work-input:search->album#searchWork work-input:new->album#newWork"
    data-bs-parent="#albums"
  >
    <div class="accordion-body">
      <form class="edit_album" id="3_edit_album" action="/fs/albums/3" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="fymsFviVlR8egFe-9mikpEUP7iJKkmN4q2ijFGDnVlkL9n2taPLXx8Hpcq8IB8CNVgYVmfqy4qxY1Xx2kLWTog" autocomplete="off" />
        <turbo-frame id="artist_fs_album_3">
  
    <div class="form-group"
         data-controller="artist-input search"
         data-action="search:select->artist-input#select"
         data-search-src-value="/artists/search"
         data-artist-input-db-class="bg-success-10"
         data-artist-input-mb-class="bg-accent-10"
    >
      <label class="d-flex justify-content-between" for="3_album_artist_attributes_name">
        <span>Artist</span>
        <a target="_blank" class="" data-artist-input-target="link" href="musicbrainz.org/search?&amp;method=indexed&amp;type=artist&amp;query=Gershwin, Ravel"><span class="me-1">MusicBrainz</span><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#open_in_new" /></svg></a>
</label>      <div class="input-group">
        <button type="button" class="btn btn-outline-secondary" data-action="artist-input#swapNames">
          <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#swap_v" /></svg>
        </button>

        <input data-search-target="input" data-artist-input-target="name" data-album-target="artistName" class="form-control" type="text" value="Gershwin, Ravel" name="album[artist_attributes][name]" id="3_album_artist_attributes_name" />
        <input data-artist-input-target="id" data-album-target="artistId" autocomplete="off" type="hidden" name="album[artist_attributes][id]" id="3_album_artist_attributes_id" />
        <input data-artist-input-target="mbId" data-album-target="artistMbId" autocomplete="off" type="hidden" name="album[artist_attributes][mb_id]" id="3_album_artist_attributes_mb_id" />
        <button name="button" type="button" class="btn btn-outline-secondary" data-action="artist-input#new" data-artist-input-url-param="/fs/albums/3/artists/new"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#plus" /></svg></button>
        <button name="button" type="button" class="btn btn-outline-info rounded-end" data-action="search#perform" data-bs-toggle="dropdown"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#magnify" /></svg></button><ul class="dropdown-menu dropdown-menu-end" data-search-target="result"></ul>
      </div>
    </div>
</turbo-frame>

        <div class="mb-3"><label class="form-label" for="3_album_album_artist">Album artist</label><div class="input-group"><button name="button" type="button" class="btn btn-outline-secondary" data-action="album#fillAlbumArtist" title="Paste artist"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#hand_right" /></svg></button><input data-album-target="albumArtistName" class="form-control" type="text" name="album[album_artist]" id="3_album_album_artist" /></div></div>

        <div class="mb-3"><label class="form-label" for="3_album_title">Title</label><div class="input-group"><button name="button" type="button" class="btn btn-outline-secondary" data-action="album#fillTitle" title="Paste work title"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#hand_right" /></svg></button><input data-album-target="title" class="form-control" type="text" value="Helene Grimaud - Piano Concertos" name="album[title]" id="3_album_title" /></div></div>

        <div class="form-group optional work_input"
     data-controller="work-input search"
     data-action="search:select->work-input#select"
     data-work-input-url-value="/fs/albums/3/works"
     data-work-input-blank-class="blank"
     data-work-input-db-class="filled-db"
     data-work-input-mb-class="filled-mb"
     data-work-input-hidden-class="d-none"
>
  <label for="3_album_work_title">Work</label>
  <div class="input-group">
    <button name="button" type="button" class="btn btn-outline-dark" data-action="work-input#switchInput">
      <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#swap_v" /></svg>
      <span data-work-input-target="fieldLabel">Title</span>
      <span class="d-none" data-work-input-target="fieldLabel">MB id</span>
</button>    <input class="form-control work_title" data-work-input-target="title" data-album-target="workTitle" type="text" name="album[work_title]" id="3_album_work_title" />
    <input class="form-control work_mb_id d-none" data-action="work-input#refresh" data-work-input-target="mbId" type="text" name="album[work_mb_id]" id="3_album_work_mb_id" />
    <input data-work-input-target="id" autocomplete="off" type="hidden" name="album[work_id]" id="3_album_work_id" />
    <button name="button" type="button" class="btn btn-outline-dark clear-button" data-action="work-input#clear"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#backspace" /></svg></button>
    <button name="button" type="button" class="btn btn-outline-dark edit-button" data-action="work-input#edit"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#edit" /></svg></button>
    <button name="button" type="button" class="btn btn-outline-secondary new-button" data-action="work-input#new" data-work-input-target="newWorkButton"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#plus" /></svg></button>

    <button type="button" class="btn btn-outline-info rounded-end"
            data-action="work-input#search"
            data-work-input-url-param="/works/search"
            data-bs-toggle="dropdown"
    >
      <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#magnify" /></svg>
    </button>

    <ul class="dropdown-menu dropdown-menu-end" data-work-input-target="result"></ul>
  </div>
</div>
        <div class="mb-3"><label class="form-label" for="3_album_genre">Genre</label><input list="genres" class="form-control" type="text" value="Classical" name="album[genre]" id="3_album_genre" /></div>

<datalist id="genres">
    <option value="Alternative Metal">
    <option value="Alternative Rock">
    <option value="Classical">
    <option value="Gothic Metal">
    <option value="Groove Metal">
    <option value="Grunge">
    <option value="Hard Rock">
    <option value="Heavy Metal">
    <option value="Industrial Metal">
    <option value="Jazz">
    <option value="Jazz Rock">
    <option value="Jazz contemporain">
    <option value="Metal">
    <option value="Nu Metal">
    <option value="Post-Grunge">
    <option value="Post-Rock">
    <option value="Progressive Metal">
    <option value="Progressive Rock">
    <option value="Rock">
    <option value="Stoner Rock">
    <option value="Symphonic Metal">
    <option value="Symphonic Rock">
</datalist>

        <div class="mb-3"><label class="form-label" for="3_album_year">Year</label><input class="form-control" type="text" value="1997" name="album[year]" id="3_album_year" /></div>
        <div class="form-group input-group optional" data-controller="cover-input">
  <label for="3_album_cover" class="optional">Cover</label>
  <div class="form-group input-group optional">
    <button class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown">
      Choose
    </button>
    <ul class="dropdown-menu">
      <li>
        <button type="button" class="dropdown-item" data-action="cover-input#enterUrl">
          Enter URL
        </button>
      </li>
      <li><hr class="dropdown-divider"></li>
    </ul>
    <input readonly="readonly" data-cover-input-target="path" class="form-control" type="text" value="/mnt/dat/music/Helene Grimaud plays Beethoven, Brahms, Gershwin and others [Box Set]/CD1/folder.jpg" name="album[cover]" id="3_album_cover" />
    <input placeholder="URL" data-cover-input-target="url" class="form-control" type="text" name="album[remote_cover_url]" id="3_album_remote_cover_url" />
    <button class="btn btn-outline-warning" data-action="cover-input#clear">
      <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#backspace" /></svg>
    </button>
  </div>
</div>

        <hr>

        <ul id="album_tracks" class="list-group">
          <li class="list-group-item bg-light">
            <div class="d-flex">
              <strong class="me-auto">
                Tracks
              </strong>
              <div class="dropdown">
                <button type="button" class="btn-flat round" data-bs-toggle="dropdown"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#dots_vertical" /></svg></button>
                <ul class="dropdown-menu">
                  <li>
                    <button class="action-button dropdown-item" type="button" data-controller="button" data-action="click-&gt;button#perform" data-button-method-value="post" data-button-url-value="/fs/albums/3/extract_title" data-button-loading-class="loading"><span class="spinner spinner-border spinner-border-sm"></span>Extract album title</button>
                  </li>
                  <li>
                    <button class="action-button dropdown-item" type="button" data-controller="button" data-action="click-&gt;button#perform" data-button-method-value="post" data-button-url-value="/fs/albums/3/set_track_titles?from=work" data-button-loading-class="loading"><span class="spinner spinner-border spinner-border-sm"></span>Set titles from work</button>
                  </li>
                  <li>
                    <button class="action-button dropdown-item" type="button" data-controller="button" data-action="click-&gt;button#perform" data-button-method-value="post" data-button-url-value="/fs/albums/3/set_track_titles?from=files" data-button-loading-class="loading"><span class="spinner spinner-border spinner-border-sm"></span>Set titles from files</button>
                  </li>
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <button type="button" class="dropdown-item"
                            data-action="fs--album#processTracks"
                            data-fs--album-url-param="/fs/albums/3/extract_tracks"
                    >
                      Extract tracks
                    </button>
                  </li>
                  <li>
                    <button type="button" class="dropdown-item"
                            data-action="fs--album#processTracks"
                            data-fs--album-url-param="/fs/albums/3/remove_tracks"
                    >
                      Remove selected
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </li>

            
              <li class="list-group-item">
                <div class="input-group" data-controller="track-input">
                  <input
                    type="checkbox"
                    class="btn-check"
                    id="3_album_tracks_attributes_0_checked"
                    name="album[tracks_attributes][0][checked]"
                    data-num="1"
                    data-fs--album-target="trackCheck"
                    />
                  <label for="3_album_tracks_attributes_0_checked"
                         class="btn btn-outline-secondary rounded-0 rounded-start">
                    1
                  </label>

                  <input class="form-control rounded-0" data-track-input-target="title" type="text" value="Gershwin - Klavierkonzert in F-dur - 1. Allegro (Helene Grimaud, Klavier - Da..." name="album[tracks_attributes][0][title]" id="3_album_tracks_attributes_0_title" />

                  <button type="button" class="btn btn-outline-dark rounded-end" data-bs-toggle="dropdown">
                    <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#menu_down" /></svg>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button type="button" class="dropdown-item" data-action="track-input#setTitle">
                        01. Gershwin - Klavierkonzert in F-dur - 1. Allegro (Helene Grimaud, Klavier - Da...
                      </button>
                    </li>
                  </ul>
                </div>
                <div class="form-text">
                  <small>CD3</small>
                  <span> / </span>
                  <strong>01. Gershwin - Klavierkonzert in F-dur - 1. Allegro (Helene Grimaud, Klavier - Da....flac</strong>
                </div>
              </li>
            
              <li class="list-group-item">
                <div class="input-group" data-controller="track-input">
                  <input
                    type="checkbox"
                    class="btn-check"
                    id="3_album_tracks_attributes_1_checked"
                    name="album[tracks_attributes][1][checked]"
                    data-num="2"
                    data-fs--album-target="trackCheck"
                    />
                  <label for="3_album_tracks_attributes_1_checked"
                         class="btn btn-outline-secondary rounded-0 rounded-start">
                    2
                  </label>

                  <input class="form-control rounded-0" data-track-input-target="title" type="text" value="Gershwin - Klavierkonzert in F-dur - 2. Adagio - Andante con moto" name="album[tracks_attributes][1][title]" id="3_album_tracks_attributes_1_title" />

                  <button type="button" class="btn btn-outline-dark rounded-end" data-bs-toggle="dropdown">
                    <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#menu_down" /></svg>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button type="button" class="dropdown-item" data-action="track-input#setTitle">
                        02. Gershwin - Klavierkonzert in F-dur - 2. Adagio - Andante con moto
                      </button>
                    </li>
                  </ul>
                </div>
                <div class="form-text">
                  <small>CD3</small>
                  <span> / </span>
                  <strong>02. Gershwin - Klavierkonzert in F-dur - 2. Adagio - Andante con moto.flac</strong>
                </div>
              </li>
            
              <li class="list-group-item">
                <div class="input-group" data-controller="track-input">
                  <input
                    type="checkbox"
                    class="btn-check"
                    id="3_album_tracks_attributes_2_checked"
                    name="album[tracks_attributes][2][checked]"
                    data-num="3"
                    data-fs--album-target="trackCheck"
                    />
                  <label for="3_album_tracks_attributes_2_checked"
                         class="btn btn-outline-secondary rounded-0 rounded-start">
                    3
                  </label>

                  <input class="form-control rounded-0" data-track-input-target="title" type="text" value="Gershwin - Klavierkonzert in F-dur - 3. Allegro agitato" name="album[tracks_attributes][2][title]" id="3_album_tracks_attributes_2_title" />

                  <button type="button" class="btn btn-outline-dark rounded-end" data-bs-toggle="dropdown">
                    <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#menu_down" /></svg>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button type="button" class="dropdown-item" data-action="track-input#setTitle">
                        03. Gershwin - Klavierkonzert in F-dur - 3. Allegro agitato
                      </button>
                    </li>
                  </ul>
                </div>
                <div class="form-text">
                  <small>CD3</small>
                  <span> / </span>
                  <strong>03. Gershwin - Klavierkonzert in F-dur - 3. Allegro agitato.flac</strong>
                </div>
              </li>
            
              <li class="list-group-item">
                <div class="input-group" data-controller="track-input">
                  <input
                    type="checkbox"
                    class="btn-check"
                    id="3_album_tracks_attributes_3_checked"
                    name="album[tracks_attributes][3][checked]"
                    data-num="4"
                    data-fs--album-target="trackCheck"
                    />
                  <label for="3_album_tracks_attributes_3_checked"
                         class="btn btn-outline-secondary rounded-0 rounded-start">
                    4
                  </label>

                  <input class="form-control rounded-0" data-track-input-target="title" type="text" value="Ravel - Klavierkonzert G-dur - 1. Allegramente" name="album[tracks_attributes][3][title]" id="3_album_tracks_attributes_3_title" />

                  <button type="button" class="btn btn-outline-dark rounded-end" data-bs-toggle="dropdown">
                    <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#menu_down" /></svg>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button type="button" class="dropdown-item" data-action="track-input#setTitle">
                        04. Ravel - Klavierkonzert G-dur - 1. Allegramente
                      </button>
                    </li>
                  </ul>
                </div>
                <div class="form-text">
                  <small>CD3</small>
                  <span> / </span>
                  <strong>04. Ravel - Klavierkonzert G-dur - 1. Allegramente.flac</strong>
                </div>
              </li>
            
              <li class="list-group-item">
                <div class="input-group" data-controller="track-input">
                  <input
                    type="checkbox"
                    class="btn-check"
                    id="3_album_tracks_attributes_4_checked"
                    name="album[tracks_attributes][4][checked]"
                    data-num="5"
                    data-fs--album-target="trackCheck"
                    />
                  <label for="3_album_tracks_attributes_4_checked"
                         class="btn btn-outline-secondary rounded-0 rounded-start">
                    5
                  </label>

                  <input class="form-control rounded-0" data-track-input-target="title" type="text" value="Ravel - Klavierkonzert G-dur - 2. Allegro assai" name="album[tracks_attributes][4][title]" id="3_album_tracks_attributes_4_title" />

                  <button type="button" class="btn btn-outline-dark rounded-end" data-bs-toggle="dropdown">
                    <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#menu_down" /></svg>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button type="button" class="dropdown-item" data-action="track-input#setTitle">
                        05. Ravel - Klavierkonzert G-dur - 2. Allegro assai
                      </button>
                    </li>
                  </ul>
                </div>
                <div class="form-text">
                  <small>CD3</small>
                  <span> / </span>
                  <strong>05. Ravel - Klavierkonzert G-dur - 2. Allegro assai.flac</strong>
                </div>
              </li>
            
              <li class="list-group-item">
                <div class="input-group" data-controller="track-input">
                  <input
                    type="checkbox"
                    class="btn-check"
                    id="3_album_tracks_attributes_5_checked"
                    name="album[tracks_attributes][5][checked]"
                    data-num="6"
                    data-fs--album-target="trackCheck"
                    />
                  <label for="3_album_tracks_attributes_5_checked"
                         class="btn btn-outline-secondary rounded-0 rounded-start">
                    6
                  </label>

                  <input class="form-control rounded-0" data-track-input-target="title" type="text" value="Ravel - Klavierkonzert G-dur - 3. Presto (Helene Grimaud, Klavier - David Zin..." name="album[tracks_attributes][5][title]" id="3_album_tracks_attributes_5_title" />

                  <button type="button" class="btn btn-outline-dark rounded-end" data-bs-toggle="dropdown">
                    <svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#menu_down" /></svg>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button type="button" class="dropdown-item" data-action="track-input#setTitle">
                        06. Ravel - Klavierkonzert G-dur - 3. Presto (Helene Grimaud, Klavier - David Zin...
                      </button>
                    </li>
                  </ul>
                </div>
                <div class="form-text">
                  <small>CD3</small>
                  <span> / </span>
                  <strong>06. Ravel - Klavierkonzert G-dur - 3. Presto (Helene Grimaud, Klavier - David Zin....flac</strong>
                </div>
              </li>
        </ul>

        <div class="card-footer actions mt-3">
          <a class="btn btn-outline-warning btn-sm" data-turbo-method="delete" data-turbo-confirm="Remove album?" href="/fs/albums/3"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#delete" /></svg><span class="ms-1">Remove album</span></a>
          <button class="action-button btn btn-outline-secondary btn-sm" type="button" data-controller="button" data-action="click-&gt;button#perform" data-button-method-value="post" data-button-url-value="/fs/albums/3/split" data-button-loading-class="loading"><span class="spinner spinner-border spinner-border-sm"></span><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#set_split" /></svg><span class="ms-1">Split album</span></button>
          <button name="button" type="submit" class="btn btn-outline-primary btn-sm"><svg class="icon " viewBox="0 0 24 24"><use href="/assets/icons-2a4beadb.svg#check" /></svg><span class="ms-1">Update album</span></button>
        </div>
</form>    </div>
  </div>
</div></template></turbo-stream>