{% extends "template.html" %}
{% block content %}

<h1>luniebox</h1>
<p>Welcome to luniebox web-interface. This is for configuring and control your luniebox device.</p>

<div class="row">
  <div class="col col-xs-12 col-md-6 col-lg-6 col-xl-6 mt-3">

    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Daemon</h5>
        <p class="card-text">
          {% if daemon_error: %}
          <div class="my-3 alert alert-danger">
            {{ daemon_error }}
            <a href="{{ url_for('api.daemon_start') }}" class="btn btn-secondary">Start daemon</a>
          </div>
          {% endif %}

          {% if daemon_status: %}
          <div class="my-3 alert alert-success">
            {{ daemon_status }}
          </div>
          {% endif %}
        </p>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <h5 class="card-title">Spotify Integration</h5>
        <p class="card-text">
          {% if spotify['errors']['setup']: %}
          <div class="alert alert-danger" role="alert">
            No luniebox device found! Please setup spotifyd propertly (device name must match name from setup, default is 'luniebox')!
          </div>
          {% endif %}

          {% if spotify['errors']['not_running']: %}
          <div class="alert alert-warning" role="alert">
            Spotifyd is not running. Please start spotifyd service on your luniebox!
            <a href="{{ url_for('api.restart_spotifyd') }}" class="btn btn-primary">Restart spotifyd</a>
          </div>
          {% endif %}

          {% if spotify['status']['not_active']: %}
          <div class="alert alert-success" role="alert">
            Spotify is available but currently inactive.
          </div>
          {% endif %}


          <table class="table">
            <tbody>
              {% if spotify['status']['device']: %}
              <tr class="{{ 'table-success' if spotify['status']['device']['id'] == spotify['device_id'] else '' }}">
                <th scope="row">Current Device</th>
                <td>{{ spotify['status']['device']['name'] }}</td>
              </tr>
              {% endif %}
              {% if spotify['status']['item']: %}
              {% with item = spotify['status']['item'] %}
              <tr class="{{ '' if spotify['status']['is_playing'] else 'table-active' }}">
                <th>{{ 'Currently playing' if spotify['status']['is_playing'] else 'Last played' }}</th>
                <td class="d-flex w-100">
                  {% include "spotify/items/track.html" %}
                </td>
              </tr>
              {% endwith %}

              {% endif %}
            </tbody>
          </table>
        </p>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <h5 class="card-title">Music Player Daemon Integration</h5>
        <p class="card-text">
          {% if not mpd: %}
          <div class="my-3 alert alert-danger">
            Music Player Daemon not connected
            <a href="{{ url_for('api.restart_mpd') }}" class="btn btn-primary">Restart mpd</a>
          </div>
          {% endif %}

          {% if mpd: %}
          <table class="table">
            <tbody>
              <tr class="table-success">
                <th scope="row">Current state</th>
                <td>{{ mpd['state'] }}</td>
              </tr>
              {% if mpd['song']: %}
              {% with item = mpd['song'] %}
              <tr class="{{ '' if mpd['state'] == 'play' else 'table-active' }}">
                <th>{{ 'Currently playing' if mpd['state'] == 'play' else 'Last played' }}</th>
                <td class="d-flex w-100">
                  <div class="d-flex flex-column flex-grow-1">
                    <h5 class="mb-1">{{ item['title'] }}</h5>
                    <p class="mb-1">
                      {{ item['artist'] }}
                    </p>
                    <small class="text-muted">{{ item['album'] }}</small>
                  </div>
                </td>
              </tr>
              {% endwith %}
              {% endif %}
            </tbody>
          </table>
          {% endif %}
        </p>
      </div>
    </div>

  </div>

  <div class="col col-xs-12 col-md-6 col-lg-6 col-xl-6 mt-3">
    <div class="card">
      <div class="card-body">
        <p class="alert alert-warning">This will stop daemon. You need to restart daemon afterwards!</p>
        <a href="{{ url_for('api.rfid_read') }}" class="btn btn-primary">Read card</a>
        <a href="{{ url_for('api.rfid_play') }}" class="btn btn-secondary">Play card</a>
      </div>
    </div>
  </div>
</div>


{% endblock %}