{% extends "base.html" %}
{% block title %}Job details{% endblock %}

{% block nav %}{{ super() }}{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/job_details.css') }}">
    <style>
        div.card div.background-poster {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            /*
            background-size: 100% 100%;
            */
            background-image: url({{ jobs.background }});
        }

        div.metacritic {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            /*
            background-size: 100% 100%;
            */
            background-color: #fc3;
            border-radius: 50% !important;
        }

        div.internet-movie-database {
            background: url("https://m.media-amazon.com/images/S/sash/7n0KRCHny73GkBG.png") no-repeat 0 -80px;
            padding-left: 20px;
            font-weight: bolder;
        }

        div.rotten-tomatoes {
            background: url("https://www.rottentomatoes.com/assets/pizza-pie/images/icons/tomatometer/tomatometer-fresh.149b5e8adc3.svg") no-repeat 0 0;
            padding-left: 23px;
            font-weight: bolder;
            background-size: 33% 100%;
            background-position: left;
        }

        div.rotten-tomatoes-rotten {
            background: url("https://www.rottentomatoes.com/assets/pizza-pie/images/icons/tomatometer/tomatometer-rotten.f1ef4f02ce3.svg") no-repeat 0 0;
            padding-left: 23px;
            font-weight: bolder;
            background-size: 33% 100%;
            background-position: left;

        }

        div.ratings {
            margin-top: -50px !important;
        }
    </style>
    <!--{{s}}
<br>
<br>
{{jobs}}
-->
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="table-responsive">
                    <div class="card{{ ' text-center' if jobs.background is none  else '' }}">
                        <!-- GF Comment -->
                        <div class="card-header text-center">
                            <h4>{{ jobs.title }} - {{ jobs.video_type.capitalize() }} ({{ jobs.year }})</h4>
                            <div class="ratings float-right mt-0">
                                <!-- Proof that just because you CAN doesnt mean you should! -->
                                {% for ratings in s['Ratings'] %}
                                    <div class="
                                            {{ ratings['Source']|replace(' ', '-')|lower }}{{ '-rotten' if ratings['Source'] == 'Rotten Tomatoes' and ratings['Value']|replace('%','')| int < 60 else '' }}">
                                        {{ ratings['Value'].split('/')[0] if '/' in ratings['Value'] else ratings['Value'] }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% if not jobs.poster_url %}
                            <div class="card-header background-poster">
                                {% if jobs.video_type == "Music" %}
                                    <a id="posterClick" href="#">
                                    <img src="static/img/music.png" alt="Not found" width="240px" class="img-thumbnail"></a>
                                {% else %}
                                    <a id="posterClick" href="#">
                                    <img src="static/img/none.png" alt="Not found" width="240px" class="img-thumbnail"></a>
                                {% endif %}
                                {% if jobs.video_type != "Music" %}
                                    <div class="btn-group float-right mt-2" role="group">
                                        <a href="titlesearch?job_id={{ jobs.job_id }}" class="btn btn-primary">Title
                                            Search</a>
                                        <a href="customTitle?job_id={{ jobs.job_id }}" class="btn btn-primary">Custom
                                            Title</a>
                                        <a id="plot" class="btn btn-primary">Plot</a>
                                    </div>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="card-header background-poster">
                                <a id="posterClick" href="#">
                                    <img src="{{ jobs.poster_url }}" width="240px" class="img-thumbnail"
                                         alt="Movie Poster"></a>
                                {% if jobs.video_type != "Music" %}
                                    <div class="btn-group float-right mt-2" role="group">
                                        <a href="titlesearch?job_id={{ jobs.job_id }}" class="btn btn-primary">Title
                                            Search</a>
                                        <a href="customTitle?job_id={{ jobs.job_id }}" class="btn btn-primary">Custom
                                            Title</a>
                                        <a id="plot" class="btn btn-primary">Plot</a>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        <div id="plotInfo" class="alert alert-info text-center" style="display: none;" role="alert">
                            <h4 class="alert-heading">Plot for {{ jobs.title }}</h4>
                            <hr>
                            <p class="mb-0">{{ jobs.plot }}</p>
                        </div>
                        <div class="card-body">
                            <table id="jobtable" class="table table-striped" aria-label="Job details">
                                <thead class="bg-secondary">
                                <tr>
                                    <th scope="col" style="text-align:left">Field</th>
                                    <th scope="col" style="text-align:left">Value</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td style="text-align:left"><strong>job_id</strong></td>
                                    <td style="text-align:left">{{ jobs.job_id }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>arm_version</strong></td>
                                    <td style="text-align:left">{{ jobs.arm_version }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>crc_id</strong></td>
                                    <td style="text-align:left">{{ jobs.crc_id }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>logfile</strong></td>
                                    <td style="text-align:left"><a
                                            href="logs?logfile={{ jobs.logfile }}&mode=full">{{ jobs.logfile }}</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>disc</strong></td>
                                    <td style="text-align:left">{{ jobs.disc }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>start_time</strong></td>
                                    <td style="text-align:left">{{ jobs.start_time }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>stop_time</strong></td>
                                    <td style="text-align:left">{{ jobs.stop_time }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>job_length</strong></td>
                                    <td style="text-align:left">{{ jobs.job_length }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>status</strong></td>
                                    <td style="text-align:left">{{ jobs.status }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>video_type</strong></td>
                                    <td style="text-align:left">{{ jobs.video_type }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>video_type_auto</strong></td>
                                    <td style="text-align:left">{{ jobs.video_type_auto }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>video_type_manual</strong></td>
                                    <td style="text-align:left">{{ jobs.video_type_manual }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>title</strong></td>
                                    <td style="text-align:left">{{ jobs.title }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>title_auto</strong></td>
                                    <td style="text-align:left">{{ jobs.title_auto }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>title_manual</strong></td>
                                    <td style="text-align:left">{{ jobs.title_manual }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>year</strong></td>
                                    <td style="text-align:left">{{ jobs.year }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>year_auto</strong></td>
                                    <td style="text-align:left">{{ jobs.year_auto }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>year_manual</strong></td>
                                    <td style="text-align:left">{{ jobs.year_manual }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>imdb_id</strong></td>
                                    <td style="text-align:left">{{ jobs.imdb_id }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>imdb_id_auto</strong></td>
                                    <td style="text-align:left">{{ jobs.imdb_id_auto }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>imdb_id_manual</strong></td>
                                    <td style="text-align:left">{{ jobs.imdb_id_manual }}</td>
                                </tr>
                                {% if not jobs.poster_url %}
                                    <tr>
                                        <td style="text-align:left"><strong>poster_url</strong></td>
                                        <td style="text-align:left"><a href=""><img src="static/img/none.png"
                                                                                    alt="Not found"
                                                                                    title="static/img/none.png"
                                                                                    width=50></a><br/>None
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>poster_url_auto</strong></td>
                                        <td style="text-align:left"><a href=""><img src="static/img/none.png"
                                                                                    alt="Not found"
                                                                                    title="static/img/none.png"
                                                                                    width=50></a><br/>None
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>poster_url_manual</strong></td>
                                        <td style="text-align:left"><a href=""><img src="static/img/none.png"
                                                                                    alt="Not found"
                                                                                    title="static/img/none.png"
                                                                                    width=50> </a><br/>None
                                        </td>
                                    </tr>
                                {% else %}
                                    <tr>
                                        <td style="text-align:left"><strong>poster_url</strong></td>
                                        <td style="text-align:left"><a href="{{ jobs.poster_url }}"><img
                                                alt="Movie Poster"
                                                src="{{ jobs.poster_url }}" title="{{ jobs.poster_url }}"
                                                width=50></a><br/>{{ jobs.poster_url }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>poster_url_auto</strong></td>
                                        <td style="text-align:left"><a href="{{ jobs.poster_url_auto }}"><img
                                                alt="Movie Poster"
                                                src="{{ jobs.poster_url_auto }}" title="{{ jobs.poster_url_auto }}"
                                                width=50></a><br/>{{ jobs.poster_url_auto }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>poster_url_manual</strong></td>
                                        <td style="text-align:left"><a href="{{ jobs.poster_url_manual }}"><img
                                                alt="Movie Poster"
                                                src="{{ jobs.poster_url_manual }}" title="{{ jobs.poster_url_manual }}"
                                                width=50> </a><br/>{{ jobs.poster_url_manual }}
                                        </td>
                                    </tr>
                                {% endif %}
                                <tr>
                                    <td style="text-align:left"><strong>devpath</strong></td>
                                    <td style="text-align:left">{{ jobs.devpath }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>mountpoint</strong></td>
                                    <td style="text-align:left">{{ jobs.mountpoint }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>hasnicetitle</strong></td>
                                    <td style="text-align:left">{{ jobs.hasnicetitle }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>errors</strong></td>
                                    <td style="text-align:left">{{ jobs.errors }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>disctype</strong></td>
                                    <td style="text-align:left">{{ jobs.disctype }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>label</strong></td>
                                    <td style="text-align:left">{{ jobs.label }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>ejected</strong></td>
                                    <td style="text-align:left">{{ jobs.ejected }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>pid</strong></td>
                                    <td style="text-align:left">{{ jobs.pid }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>pid hash</strong></td>
                                    <td style="text-align:left">{{ jobs.pid_hash }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>path</strong></td>
                                    <td style="text-align:left">{{ jobs.path }}</td>
                                </tr>
                                <tr>
                                    <td style="text-align:left"><strong>Config ID</strong></td>
                                    <td style="text-align:left"> {{ jobs.config.CONFIG_ID }}</td>
                                </tr>
                                {% if jobs.video_type != "Music" %}
                                    <tr>
                                        <td style="text-align:left"><strong>HB_PRESET_DVD</strong></td>
                                        <td style="text-align:left"> {{ jobs.config.HB_PRESET_DVD }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>HB_ARGS_DVD</strong></td>
                                        <td style="text-align:left"> {{ jobs.config.HB_ARGS_DVD }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>HB_PRESET_BD</strong></td>
                                        <td style="text-align:left">{{ jobs.config.HB_PRESET_BD }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>HB_ARGS_BD</strong></td>
                                        <td style="text-align:left">{{ jobs.config.HB_ARGS_BD }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align:left"><strong>Drive Mode</strong></td>
                                        <td style="text-align:left">
                                            {% if jobs.manual_mode %}
                                                Manual
                                            {% else %}
                                                Auto
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endif %}
                                </tbody>
                            </table>
                            <hr class="test d-none">
                            <form method="POST" action="/jobdetailload?job_id={{ jobs.job_id }}">
                                <table id="tracktable" class="table table-striped" aria-label="Tracks">
                                    <thead class="bg-secondary">
                                    <tr>
                                        <th scope="col" style="text-align:left">Track #</th>
                                        {% if jobs.video_type == "Music" %}
                                            <th scope="col" style="text-align:left">Track Name</th>
                                        {% endif %}
                                        <th scope="col" style="text-align:left">
                                            <button type="button" id="toggle-time-format" class="btn btn-primary" title="Click to toggle time format">
                                                <span id="time-format-label">seconds</span>
                                            </button>
                                        </th>
                                        <th scope="col" style="text-align:left">FPS</th>
                                        <th scope="col" style="text-align:left">Aspect Ratio</th>
                                        <th scope="col" style="text-align:left">Main Feature</th>
                                        {% if jobs.video_type != "Music" %}
                                            <th scope="col" style="text-align:left">Manual Process</th>
                                        {% endif %}
                                        <th scope="col" style="text-align:left">Ripped</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for track in tracks %}
                                        <tr>
                                            <td style="text-align:left"><strong>{{ track.track_number }}</strong></td>
                                            {% if jobs.video_type == "Music" %}
                                                <td style="text-align:left"><strong>{{ track.filename}}</strong></td>
                                            {% endif %}
                                            <td style="text-align:left">
                                                <span class="length-seconds">{{ track.length }}{{ " (Milliseconds)" if jobs.video_type == "Music" else "" }}</span>
                                                <span class="length-formatted" style="display:none;" data-seconds="{{ track.length }}"></span>
                                            </td>
                                            <td style="text-align:left">{{ track.fps }}</td>
                                            <td style="text-align:left">{{ track.aspect_ratio }}</td>
                                            <td style="text-align:left">{{ track.main_feature }}</td>
                                            {% if jobs.video_type != "Music" %}
                                                <td style="text-align:center">
                                                        {{ form.track_ref[loop.index0].checkbox }}
                                                        {{ form.track_ref[loop.index0].track_ref }}
                                                </td>
                                            {% endif %}
                                            <td style="text-align:left">{{ track.ripped }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                {% if manual_edit  %}
                                    {{ form.hidden_tag() }}
                                    <button type="submit" class="btn btn-primary btn-sm" name="submit">Update</button>
                                {% endif %}
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="application/javascript">
        $(function () {
            $("#plot").click(function () {
                $("#plotInfo").slideToggle(1000);
            });
            $("#posterClick").click(function () {
                $("#plotInfo").slideToggle(1000);
            });

            // Function to convert seconds to HH:MM:SS format
            function secondsToHHMMSS(seconds) {
                if (!seconds) return "00:00:00";
                
                // Check if the video type is Music (which stores duration in milliseconds)
                const isMusic = "{{ jobs.video_type }}" === "Music";
                let secondsValue = parseInt(seconds, 10);
                
                // Convert milliseconds to seconds for music tracks
                if (isMusic) {
                    secondsValue = Math.round(secondsValue / 1000);
                }
                
                const hours = Math.floor(secondsValue / 3600);
                const minutes = Math.floor((secondsValue % 3600) / 60);
                const remainingSeconds = Math.floor(secondsValue % 60);
                
                // If it's a short track with no hours, just show MM:SS
                if (hours === 0) {
                    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
                }
                
                return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
            }

            // Convert all length values to HH:MM:SS and store them
            $('.length-formatted').each(function() {
                const seconds = $(this).data('seconds');
                $(this).text(secondsToHHMMSS(seconds));
            });

            // Handle time format toggle
            let showFormatted = false;
            $('#toggle-time-format').click(function() {
                showFormatted = !showFormatted;
                if (showFormatted) {
                    $('.length-seconds').hide();
                    $('.length-formatted').show();
                    $('#time-format-label').text('HH:MM:SS');
                } else {
                    $('.length-seconds').show();
                    $('.length-formatted').hide();
                    $('#time-format-label').text('seconds');
                }
                
                // Store preference in local storage
                localStorage.setItem('arm_show_formatted_time', showFormatted);
            });
            
            // Check if there's a saved preference
            if (localStorage.getItem('arm_show_formatted_time') === 'true') {
                showFormatted = true;
                $('.length-seconds').hide();
                $('.length-formatted').show();
                $('#time-format-label').text('HH:MM:SS');
            }
        });

    </script>
{% endblock %}
{% block footer %}{{ super() }}{% endblock %}
{% block js %}
    {{ super() }}

{% endblock %}