<!doctype html> <!-- NOTE: For testing porpoises only! -->
<html lang="en">

<head>
<meta charset="utf-8">
<title> {{VO_TYPE0}} listings: {{NATIONALITY}} </title>
<style>
table { border-collapse: collapse ; }
th { text-align: left ; padding: 0.2em 0.5em ; background: #eee ; border: 1px solid #ccc ; }
tr { border-bottom: 1px dotted #ccc ; }
td { padding: 0.2em 0.5em ; vertical-align: top ; }
.val { padding: 0.1em 0.25em ; background: #eee ; }
.brewup { color: #a04010 ; }
</style>
</head>

<body>
<div id="results" style="display:none;"></div>
</body>

<script src="{{url_for('static',filename='jquery/jquery-3.3.1.min.js')}}"></script>
<script src="{{url_for('static',filename='snippets.js')}}"></script>
<script src="{{url_for('static',filename='utils.js')}}"></script>

<script>
$(document).ready( function () {
    // get the vehicle/ordnance listings
    var url ;
    if ( "{{VO_TYPE}}" == "ordnance" )
        url = "{{url_for( 'get_ordnance_listings', report=1 )}}" ;
    else
        url = "{{url_for( 'get_vehicle_listings', report=1 )}}" ; // nb: includes landing craft
    if ( getUrlParam( "merge_common" ) === "1" )
        url += "&merge_common=1" ;
    $.getJSON( url, function(data) {
        load_vo_listings( data ) ;
    } ).fail( function( xhr, status, errorMsg ) {
        alert( "Can't get the {{VO_TYPE0}} listings:\n\n" + errorMsg ) ;
    } ) ;
} ) ;

function load_vo_listings( objs )
{
    // initialize
    var theater = "{{THEATER}}".toUpperCase() ;
    var nat = "{{NATIONALITY}}" ;
    var year = {{YEAR}} ;
    var month = {{MONTH}} ;
    var $results = $("#results") ;
    var vo_name = getUrlParam( "name" ) ; // nb: restricts the report to a single vehicle/ordnance
    if ( vo_name )
        vo_name = decodeURIComponent( vo_name ).toLowerCase() ;

    // check if there are any vehicles/ordnance for the specified nationality
    if ( "{{VO_TYPE}}" === "landing-craft" )
        nat = "landing-craft" ;
    if ( ! (nat in objs ) ) {
        $results.text( "No listings for nationality: " + nat ).show() ;
        return ;
    }

    // load the vehicles/ordnance
    var buf = [] ;
    buf.push( "<table>" ) ;
    buf.push( "<tr>", "<th>Name", "<th colspan='2'>Capabilities", "<th colspan='2'>Notes", "<th>Comments" ) ;
    for ( var i=0 ; i < objs[nat].length ; ++i ) {
        var obj = objs[nat][i] ;
        if ( vo_name && obj.name.toLowerCase() != vo_name )
            continue ;
        buf.push( "<tr>" ) ;
        buf.push( "<td>", fmtval(obj.name) ) ;
        var capabilities = make_capabilities( true, obj, "{{VO_TYPE}}", nat, false, theater, year, month, true ) ;
        buf.push( "<td>", listval(capabilities) ) ;
        var capabilities = make_capabilities( false, obj, "{{VO_TYPE}}", nat, false, theater, year, month, true ) ;
        buf.push( "<td>", listval(capabilities) ) ;
        var note_number = obj.note_number ? "<span class='val'>" + fmtval(obj.note_number) + "</span>" : fmtval("") ;
        buf.push( "<td>", note_number ) ;
        buf.push( "<td>", listval(obj.notes) ) ;
        if ( ! obj.comments )
            buf.push( "<td>" ) ;
        else {
            var comments = get_vo_comments( obj, month, year ) ;
            for ( var j=0 ; j < comments.length ; ++j ) {
                var val = strReplaceAll( strReplaceAll( comments[j], "<ul>", "[{" ), "</ul>", "}]" ) ;
                comments[j] = val.replace( /\<li\>\s*/g, "*:" ) ;
            }
            buf.push( "<td>", listval(comments," | ") ) ;
        }
    }
    buf.push( "</table>" ) ;
    $results.html( buf.join("") ).show() ;
}

function fmtval( val )
{
    // return the formatted value
    if ( ! val )
        return "<small><em>n/a</em></small>" ;
    return val ;
}

function listval( vals, sep )
{
    // return the formatted list of values
    if ( ! vals )
        return "<small><em>n/a</em></small>" ;
    var buf = [] ;
    for ( var i=0 ; i < vals.length ; ++i )
        buf.push( "<span class='val'>" + vals[i] + "</span>" ) ;
    return buf.join( sep ? sep : " " ) ;
}

</script>

</html>
