{% extends 'base.html' %}

{% block title %}
{{ station|capitalize }} Tracks
{% endblock %}

{% block content %}
    <form method="POST" id="move" action="/move_to_main"></form>
    <form method="POST" id="delete" action="/delete_track/{{ station }}"></form>
    <form method="POST" id="update-title" action="/update_title"></form>
    <form method="POST" id="update-artist" action="/update_artist"></form>
    <table id="tracks-table" class="tablemobile">
        <tbody>
            <tr>
                <th scope="col" class="box header config-col">Config</th>
                {% if station == 'new' %}
                <th scope="col" class="box header move-col">Move</th>
                {% endif %}
                <th scope="col" class="box header del-col">Delete</th>
                <th scope="col" class="box header track-col">Track</th>
                <th scope="col" class="box header artist-col">Artist</th>
            </tr>
            {% if station == 'new' %}
            {% endif %}
            {% for track in tracks %}
            <tr>
                {% if track.config_rel != None %}
                <td class="config-num box config-hover-field">
                    <span class="config-num">
                        {{ track.config_rel.config_id }}
                    </span>
                    <div class="info">
                        {% if track.config_rel.genres != "None" %}
                        <p>Genres: {{ track.config_rel.genres.replace(";", ", ") }}</p>
                        {% endif %}
                        {% if track.config_rel.styles != "None" %}
                        <p>Styles: {{ track.config_rel.styles.replace(";", ", ") }}</p>
                        {% endif %}
                        {% if track.config_rel.decade != "None" %}
                        <p>Decade: {{ track.config_rel.decade }}</p>
                        {% endif %}
                        {% if track.config_rel.year != "None" %}
                        <p>Year: {{ track.config_rel.year }}</p>
                        {% endif %}
                        {% if track.config_rel.country != "None" %}
                        <p>Country: {{ track.config_rel.country }}</p>
                        {% endif %}
                        {% if track.config_rel.sort_method != "None" %}
                        <p>Sort Method: {{ track.config_rel.sort_method }}</p>
                        {% endif %}
                        {% if track.config_rel.sort_order != "None" %}
                        <p>Sort Order: {{ track.config_rel.sort_order }}</p>
                        {% endif %}
                    </div>
                </td>
                {% else %}
                <td class="config-num box">{{ track.config }}</td>
                {% endif %}
                {% if station == 'new' %}
                <td class="box">
                    <button class="button linea-icon" type="submit" form="move" name="move_to_main" value="{{ track.track_id }}"><img src="{{ url_for('static', filename='/images/basic_paperplane.svg') }}" alt="Move" width="30" height="30"></button>
                </td>
                {% endif %}
                <td class="box">
                    <button class="button linea-icon" type="submit" form="delete" name="delete_track" value="{{ track.track_id }}">
                        <img src="{{ url_for('static', filename='images/basic_trashcan.svg') }}" alt="Del" width="30" height="30">
                    </button>
                </td>
                <td class="box track-info">
                    <button class="edit-button button linea-icon" type="submit"><img src="{{ url_for('static', filename='/images/software_pencil.svg') }}" alt="Edit" height="20" width="20"></button>
                    <button class="update-button button linea-icon" type="submit" form="update-title" name="update-title" value=""><img src="{{ url_for('static', filename='/images/basic_floppydisk.svg') }}" alt="Save" width="20" height="20"></button>
                    <p class="track-id" hidden>{{ track.track_id }}</p>
                    <p class="track-title">{{ track.title }}</p>
                </td>
                <td class="box track-info">
                    <button class="edit-button button linea-icon" type="submit"><img src="{{ url_for('static', filename='/images/software_pencil.svg') }}" alt="Edit" height="20" width="20"></button>
                    <button class="update-button button linea-icon" type="submit" form="update-artist" name="update-artist" value=""><img src="{{ url_for('static', filename='/images/basic_floppydisk.svg') }}" alt="Save" width="20" height="20"></button>
                    <p class="track-id" hidden>{{ track.track_id }}</p>
                    <p class="track-title">{{ track.artist }}</p>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <script src="{{ url_for('static', filename='edit_track_title.js') }}"></script>
    <script src="{{ url_for('static', filename='edit_track_artist.js') }}"></script>
    <script src="{{ url_for('static', filename='mouse_finder.js') }}"></script>
{% endblock %}