<div id="library" class="module{% if not library %} root{% elif library.moviedetails or library.tvshowdetails or library.episodedetails or library.artistdetails or library.albumdetails %} info{% endif %}" data-module="library">

  <div class="module_settings"><span>Settings</span></div>
  <div class="module_remove"><span>Remove</span></div>

  {% if library %}

    <h2>{{ title }}</h2>

    {% if message %}
      <p class="message">{{ message }}</p>
    {% endif %}

    {% if file_type == "video_directory" or file_type == "music_directory" %}
      {% if previous_dir == "sources" %}
        <div class="back" id="back_sources" {% if file_type == "video_directory" %}data-file_type="video"{% else %}data-file_type="music"{% endif %} title="Back">&laquo;</div>
      {% else %}
        <div class="back" id="back_dir" data-back="{{ previous_dir }}" {% if file_type == "video_directory" %}data-file_type="video"{% else %}data-file_type="music"{% endif %} title="Back">&laquo;</div>
      {% endif %}
    {% else %}
      <div class="back" id="back" title="Back">&laquo;</div>
    {% endif %}

    <ul>
      {% if library.tvshows %}
        {% for item in library.tvshows %}
          <li class="get" data-command="shows/{{ item.tvshowid }}" file-type="video" media-type="tvshow" data-id="{{ item.tvshowid }}">
            {{ item.label }}
            <span class="span">
              <a class="li_buttons" id="info">Info</a>
              <a class="li_buttons" id="play">Play</a>
              <a class="li_buttons" id="queue">Queue</a>
            </span>
            {% if item.playcount %}
              <img src="{{ url_for('static', filename='images/tick.png') }}" class="watched" width="16" height="16">
            {% endif %}
          </li>
        {% endfor %}
      {% endif %}

      {% if library.tvshowdetails %}
        <li class="details" data-command="shows/info/{{ library.tvshowdetails.tvshowid }}">
          {% if library.tvshowdetails.thumbnail %}
            <img class="{% if bannerart %}bannerart{% else %}posterart{% endif %}" src="{{ library.tvshowdetails.thumbnail|xbmc_image }}">
          {% endif %}
          <p class="p_info">
            <table border="0">
              <tr>
                <td width="75" style="font-weight:bold;">Studio:</td>
                <td style="font-size: 0.950em;">{{ library.tvshowdetails.studio }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Premier:</td>
                <td style="font-size: 0.950em;">{{ library.tvshowdetails.Premier }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Genre:</td>
                <td style="font-size: 0.950em;">{{ library.tvshowdetails.genre|truncate(30, 'false') }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Rating:</td>
                <td style="font-size: 0.950em;">{{ library.tvshowdetails.rating|float|round(1, 'common') }} / 10</td>
              </tr>
            </table>
            <br /><span style="font-weight:bold;">Plot:</span>
            <br /><span style="font-size: 0.950em;">{{ library.tvshowdetails.plot }}</span>
          </p>
        </li>
      {% endif %}

      {% if library.seasons %}
        {% for item in library.seasons %}
          <li class="get" data-command="shows/{{ library.tvshowid }}/{{ item.season }}" file-type="video" media-type="season_{{ item.season }}" data-id="{{ item.tvshowid }}">
            {{ item.label }}
            <span class="span">
              <a class="li_buttons" id="play">Play</a>
              <a class="li_buttons" id="queue">Queue</a>
            </span>
            {% if item.playcount %}
              <img src="{{ url_for('static', filename='images/tick.png') }}" class="watched" width="16" height="16">
            {% endif %}
          </li>
        {% endfor %}
      {% endif %}

      {% if library.episodes %}
        {% for item in library.episodes %}
          <li {% if show_info %}id="info"{% else %}id="resume_check"{% endif %} file-type="video" media-type="episode" data-id="{{ item.episodeid }}" data-command="shows/{{ item.tvshowid }}/{{ item.season }}/{{ item.episodeid }}">
            {{ item.label }}
            <span class="span">
              {% if show_info %}
                <a class="li_buttons" id="play">Play</a>
              {% else %}
                <a class="li_buttons" id="info">Info</a>
              {% endif %}
              <a class="li_buttons" id="queue">Queue</a>
            </span>
            {% if item.playcount %}
              <img src="{{ url_for('static', filename='images/tick.png') }}" class="watched" width="16" height="16">
            {% endif %}
          </li>
        {% endfor %}
      {% endif %}

      {% if library.episodedetails %}
        <li class="details" data-command="shows/{{ library.episodedetails.tvshowid }}/{{ library.episodedetails.season }}/info/{{ library.episodedetails.episodeid }}">
          {% if library.episodedetails.thumbnail %}
            <img class="episodeart" src="{{ library.episodedetails.thumbnail|xbmc_image }}">
          {% endif %}

          <p class="p_info">
            <table border="0">
              <tr>
                <td width="75" style="font-weight:bold;">First Aired:</td>
                <td style="font-size: 0.950em;">{{ library.episodedetails.firstaired }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Rating:</td>
                <td style="font-size: 0.950em;"> {{ library.episodedetails.rating|float|round(1, 'common') }} / 10</td>
              </tr>
            </table>
            <br /><span style="font-weight:bold;">Plot:</span>
            <br /><span style="font-size: 0.950em;">{{ library.episodedetails.plot }}</span>
          </p>
        </li>
      {% endif %}

      {% if library.movies %}
        {% for item in library.movies %}
          <li {% if show_info %}id="info"{% else %}id="resume_check"{% endif %} file-type="video" media-type="movie" data-id="{{ item.movieid }}">
            {{ item.label }}
            <span class="span">
              {% if show_info %}
                <a class="li_buttons" id="play">Play</a>
              {% else %}
                <a class="li_buttons" id="info">Info</a>
              {% endif %}
              <a class="li_buttons" id="queue">Queue</a>
            </span>
            {% if item.playcount %}
              <img src="{{ url_for('static', filename='images/tick.png') }}" class="watched" width="16" height="16">
            {% endif %}
          </li>
        {% endfor %}
      {% endif %}

      {% if library.moviedetails %}
        <li class="details" data-command="movies/info/{{ library.moviedetails.movieid }}">
          {% if library.moviedetails.thumbnail %}
            <img class="posterart" src="{{ library.moviedetails.thumbnail|xbmc_image }}">
          {% endif %}
          <p class="p_info">
            <table border="0">
              <tr>
                <td width="75" style="font-weight:bold;">Director:</td>
                <td style="font-size: 0.950em;">{{ library.moviedetails.director }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Year:</td>
                <td style="font-size: 0.950em;">{{ library.moviedetails.year }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Genre:</td>
                <td style="font-size: 0.950em;">{{ library.moviedetails.genre|truncate(30, 'false') }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Rating:</td>
                <td style="font-size: 0.950em;">{{ library.moviedetails.rating|float|round(1, 'common') }} / 10</td>
              </tr>
            </table>
            <br /><span style="font-weight:bold;">Plot:</span>
            <br /><span style="font-size: 0.950em;">{{ library.moviedetails.plot }}</span>
          </p>
        </li>
      {% endif %}

      {% if library.artists %}
        {% for item in library.artists %}
          <li class="get" file-type="audio" media-type="artist" data-id="{{ item.artistid }}" data-command="artists/{{ item.artistid }}">
            {{ item.label }}
            <span class="span">
              <a class="li_buttons" id="info">Info</a>
              <a class="li_buttons" id="play">Play</a>
              <a class="li_buttons" id="queue">Queue</a>
            </span>
          </li>
        {% endfor %}
      {% endif %}

      {% if library.artistdetails %}
        <li class="details" data-command="artists/info/{{ library.artistdetails.artistid }}">
          {% if library.artistdetails.thumbnail %}
            <img class="artistart" src="{{ library.artistdetails.thumbnail|xbmc_image }}">
          {% endif %}
          <p class="p_info">
            <table border="0">
              <tr>
                <td width="75" style="font-weight:bold;">Genre:</td>
                <td style="font-size: 0.950em;">{{ library.artistdetails.genre|truncate(30, 'false') }}</td>
              </tr>
            </table>
            <br /><span style="font-weight:bold;">Artist Information:</span>
            <br /><span style="font-size: 0.950em;">{{ library.artistdetails.description }}</span>
          </p>
        </li>
      {% endif %}

      {% if library.albums %}
        {% for item in library.albums %}
          <li class="get"  file-type="audio" media-type="album" data-id="{{ item.albumid }}" data-command="artists/{{ item.artistid }}/{{ item.albumid }}">
            {{ item.label }} ({{ item.year }})
            <span class="span">
              <a class="li_buttons" id="info">Info</a>
              <a class="li_buttons" id="play">Play</a>
              <a class="li_buttons" id="queue">Queue</a>
            </span>
          </li>
        {% endfor %}
      {% endif %}

      {% if library.albumdetails %}
        <li class="details" data-command="artists/{{ library.albumdetails.artistid }}/info/{{ library.albumdetails.albumid }}">
          {% if library.albumdetails.thumbnail %}
            <img class="albumart" src="{{ library.albumdetails.thumbnail|xbmc_image }}">
          {% endif %}
          <p class="p_info">
            <table border="0">
              <tr>
                <td width="75" style="font-weight:bold;">Genre:</td>
                <td style="font-size: 0.950em;">{{ library.albumdetails.genre|truncate(30, 'false') }}</td></tr>
              </tr>
              <tr>
                <td style="font-weight:bold;">Year:</td>
                <td style="font-size: 0.950em;">{{ library.albumdetails.year }}</td>
              </tr>
              <tr>
                <td style="font-weight:bold;">Rating:</td>
                <td style="font-size: 0.950em;">{{ library.albumdetails.rating|float|round(1, 'common') }} / 10</td>
              </tr>
            </table>
            <br /><span style="font-weight:bold;">Album Description:</span>
            <br /><span style="font-size: 0.950em;">{{ library.albumdetails.description }}</span>
          </p>
        </li>
      {% endif %}

      {% if library.songs %}
        {% for item in library.songs %}
          <li id="play" file-type="audio" media-type="song" data-id="{{ item.songid }}" data-command="artists/{{ item.artistid }}/{{ item.albumid }}/{{ item.songid }}">
            {% if item.track < 10 %}0{% endif %}{{ item.track }} - {{ item.label }}
            <span class="span">
              <a class="li_buttons" id="queue">Queue</a>
            </span>
            {% if item.playcount %}
              <img src="{{ url_for('static', filename='images/tick.png') }}" class="watched" width="16" height="16">
            {% endif %}
          </li>
        {% endfor %}
      {% endif %}

      {% if library.filemode %}
        <li class="get" data-command="files/video">Video</li>
        <li class="get" data-command="files/music">Music</li>
      {% endif %}

      {% if file_type == "video" %}
        {% for item in library.sources %}
          <li class="dir" data-file_type="video" data-command="files/video/{{ item.label }}" data-path="{{ item.file }}">
            {{ item.label }}
          </li>
        {% endfor %}
        <li class="dir" data-file_type="video" data-command="files/video/playlists" data-path="special://userdata/playlists/video/">
          Playlists
        </li>
      {% endif %}

      {% if file_type == "music" %}
        {% for item in library.sources %}
          {% if item.label != "Music Add-ons" %}
            <li class="dir" data-file_type="music" data-command="files/music/{{ item.label }}" data-path="{{ item.file }}">
              {{ item.label }}
            </li>
          {% endif %}
        {% endfor %}
        <li class="dir" data-file_type="music" data-command="files/music/playlists" data-path="special://userdata/playlists/music/">
          Playlists
        </li>
      {% endif %}

      {% if file_type == "video_directory" %}
        {% for item in library.files %}
          {% if item.filetype == "directory" %}
            <li class="{% if item.type != "unknown" %}play_file{% else %}dir{% endif %}" media-type="file" data-file_type="video" data-path="{{ item.file }}">{{ item.label }}</li>
          {% elif item.filetype == "none" %}
            <li class="empty">No video files found.</li>
          {% else %}
            <li class="play_file" media-type="file" data-file_type="video" data-path="{{ item.file }}">
              {{ item.label }}
              <span class="span">
                <a class="li_buttons" id="queue_file" media-type="file" data-file_type="video" data-path="{{ item.file }}">Queue</a>
              </span>
            </li>
          {% endif %}
        {% endfor %}
      {% endif %}

      {% if file_type == "music_directory" %}
        {% for item in library.files %}
          {% if item.filetype == "directory" %}
            <li class="dir" media-type="file" data-file_type="music" data-path="{{ item.file }}">{{ item.label }}</li>
          {% elif item.filetype == "none" %}
            <li class="empty">No music files found.</li>
          {% else %}
            <li class="play_file" media-type="file" data-file_type="music" data-path="{{ item.file }}">
              {{ item.label }}
              <span class="span">
                <a class="li_buttons" id="queue_file" media-type="file" data-file_type="music" data-path="{{ item.file }}">Queue</a>
              </span>
            </li>
          {% endif %}
        {% endfor %}
      {% endif %}
    </ul>

  {% else %}

    <h2>Media Library</h2>

    <ul>
      <li class="get" data-command="movies">Movies</li>
      <li class="get" data-command="shows">TV Shows</li>
      {% if show_music %}
        <li class="get" data-command="artists">Music</li>
      {% endif %}
      {% if show_files %}
        <li class="get" data-command="files">Files</li>
      {% endif %}
    </ul>

  {% endif %}

    <div id="filter"><input type="search" name="input" class="filter" value="Filter" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Filter':this.value;"></input></div>
  {% if message %}
      <div class="message">{{ message }}</div>
    {% endif %}
    <div class="powerholder" style="text-align:right" >

  {% if library %}
    {% if library.moviedetails %}
      {% if library.moviedetails.resume.position >= 1 %}
        <a class="info_buttons" id="resume" media-type="movie" data-id="{{ library.moviedetails.movieid }}" title="Resume Movie">Resume</a>
      {% endif %}
      <a class="info_buttons" id="play" file-type="video" media-type="movie" data-id="{{ library.moviedetails.movieid }}" title="Play Movie">Play</a>
      <a class="info_buttons" id="queue" file-type="video" media-type="movie" data-id="{{ library.moviedetails.movieid }}" title="Add to Queue">Queue</a>
      {% if library.moviedetails.trailer %}
        <a class="info_buttons" id="trailer" data-id="{{ library.moviedetails.movieid }}" title="Play Trailer">Trailer</a>
      {% endif %}

    {% elif library.tvshowdetails %}
      <a class="info_buttons" id="play" file-type="video" media-type="tvshow" data-id="{{ library.tvshowdetails.tvshowid }}" title="Play TV show">Play</a>
      <a class="info_buttons" id="queue" file-type="video" media-type="tvshow" data-id="{{ library.tvshowdetails.tvshowid }}" title="Add to Queue">Queue</a>

    {% elif library.episodedetails %}
      {% if library.episodedetails.resume.position >= 1 %}
        <a class="info_buttons" id="resume" file-type="video" media-type="episode" data-id="{{ library.episodedetails.episodeid }}" title="Resume Episode">Resume</a>
      {% endif %}
      <a class="info_buttons" id="play" file-type="video" media-type="episode" data-id="{{ library.episodedetails.episodeid }}" title="Play Episode">Play</a>
      <a class="info_buttons" id="queue" file-type="video" media-type="episode" data-id="{{ library.episodedetails.episodeid }}" title="Add to Queue">Queue</a>

    {% elif library.artistdetails %}
      <a class="info_buttons" id="play" file-type="audio" media-type="artist" data-id="{{ library.artistdetails.artistid }}" title="Play All Albums">Play</a>
      <a class="info_buttons" id="queue" file-type="audio" media-type="artist" data-id="{{ library.artistdetails.artistid }}" title="Add to Queue">Queue</a>

    {% elif library.albumdetails %}
      <a class="info_buttons" id="play" file-type="audio" media-type="album" data-id="{{ library.albumdetails.albumid }}" title="Play Album">Play</a>
      <a class="info_buttons" id="queue" file-type="audio" media-type="album" data-id="{{ library.albumdetails.albumid }}" title="Add to Queue">Queue</a>
    {% endif %}

    {% if library.tvshows or library.seasons or library.episodes or library.movies or library.moviedetails or library.tvshowdetails or library.episodedetails or file_type == "video_directory" %}
      <a class="power" title ="Update Video Library" id="video-update"><img src="{{ url_for('static', filename='images/refresh.png') }}" width="14" height="14"/></a>
      <a class="power" title ="Clean Video Library" id="video-clean"><img src="{{ url_for('static', filename='images/clean.png') }}" width="14" height="14"/></a>

    {% elif library.artists or library.albums or library.songs or library.artistdetails or library.albumdetails or file_type == "music_directory" %}
      <a class="power" title ="Update Music Library" id="audio-update"><img src="{{ url_for('static', filename='images/refresh.png') }}" width="14" height="14"/></a>
      <a class="power" title ="Clean Music Library" id="audio-clean"><img src="{{ url_for('static', filename='images/clean.png') }}" width="14" height="14"/></a>
    {% endif %}
  {% endif %}

  {% if message %}
      <a class="power" title="Try Wake On LAN" id="poweron"><img src="{{ url_for('static', filename='images/poweron.png') }}" width="14" height="14"/></a>
  {% endif %}
  {% if not library and not show_music %}
      <a class="power" title ="Update Video Library" id="video-update"><img src="{{ url_for('static', filename='images/refresh.png') }}" width="14" height="14"/></a>
      <a class="power" title ="Clean Video Library" id="video-clean"><img src="{{ url_for('static', filename='images/clean.png') }}" width="14" height="14"/></a>
  {% endif %}
  {% if library_show_power_buttons %}
    <a class="power" title ="Suspend" id="suspend" ><img src="{{ url_for('static', filename='images/suspend.png') }}" width="14" height="14"/></a>
    <a class="power" title ="Reboot" id="reboot" ><img src="{{ url_for('static', filename='images/reboot.png') }}" width="14" height="14"/></a>
    <a class="power" title ="Shutdown" id="poweroff" ><img src="{{ url_for('static', filename='images/shutdown.png') }}" width="14" height="14"/></a>
  {% endif %}

    </div>
</div>
