#!/usr/bin/perl --

use utf8;
use open ':std', ':encoding(UTF-8)';

unshift(@INC, '../../cgi/');

require "./cgi-lib.pl";

$home = "..";

&ReadParse(*input);

$editing = $input{'editing'};
$oneid = $input{'oneid'};
$concise = $input{'concise'};

print "Content-Type: text/html; charset=utf-8\n\n";

# Print page header with consistent site styling
print <<'HEADER';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PLUM - Programming Languages Used for Music</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            background: #FFD2A3;
        }
        a { color: #c76300; text-decoration: none; }
        a:hover { text-decoration: underline; }
        main {
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 4vw;
        }
        .banner {
            text-align: center;
            margin-bottom: 20px;
        }
        .banner img { max-width: 100%; height: auto; }
        .info-bar {
            background: #800080;
            color: white;
            text-align: center;
            padding: 8px 16px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .lang-entry {
            background: rgba(255,255,255,0.5);
            border: 2px solid #800080;
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 20px;
        }
        .lang-entry h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #333;
        }
        .lang-entry table {
            width: 100%;
            border-collapse: collapse;
        }
        .lang-entry td {
            padding: 4px 8px 4px 0;
            vertical-align: top;
        }
        .lang-entry .label {
            font-style: italic;
            color: #666;
            width: 120px;
        }
        dl { margin: 0; }
        dt {
            font-weight: 700;
            margin-top: 16px;
        }
        dt a { color: #333; }
        dt a:hover { color: #c76300; }
        dd {
            margin-left: 20px;
            margin-top: 4px;
        }
        .back-link {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e5e5e5;
        }
        footer {
            border-top: 1px solid #e5e5e5;
            padding: 40px 4vw;
            text-align: center;
            color: #888;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <main>
        <div class="banner">
            <a href="/plum"><img src="../plumtrim.png" alt="PLUM"></a>
        </div>
HEADER

if ( $ENV{'REMOTE_ADDR'} eq '99.34.229.246' ) {
	$editing = "true";
}
if ( $ENV{'REMOTE_ADDR'} eq '108.193.3.210' ) {
	$editing = "true";
}

if ( $oneid eq "" ) {
	print "<div class=\"info-bar\">Click on each language name for more details</div>\n";
}

open(DB,"cat ".$home."/db/list.db | sort -f -t \";\" -k 2 |");

if ( ! $concise eq "" ) { print "<dl>\n"; }

while ( <DB> ) {
	($id,$lang,$compos,$impl,$year,$auth,$desc,$url,$ref,$manip) = split(/[;
\n]/);
	if ( $id eq "ID" ) { next; }
	if ( $lang eq "" ) { next; }

	if ( $oneid ne "" && $oneid ne $id ) { next; }

	$_ = $desc;
	s/\x07/ /g;
	s/<((http|ftp):[^>]*)>/<a href="\1">\1<\/a>/g;
	$desc = $_;

	if ( $concise eq "" ) {
	    print "<div class=\"lang-entry\">\n";
	    print "<h3>$lang</h3>\n";
	    if ( ! $editing eq "" ) {
		print "<form action=edit.cgi style=\"margin-bottom:10px;\">";
		print "<input type=hidden name=id value=\"$id\">";
		print "<input type=submit value=Edit>";
		print "</form>";
	    }
	    print "<table>\n";
	    print "<tr><td class=\"label\">Computer/OS:</td><td>$compos</td>";
	    print "<td class=\"label\">Year:</td><td>$year</td></tr>\n";
	    print "<tr><td class=\"label\">Author:</td><td>$auth</td>";
	    print "<td class=\"label\">Manipulates:</td><td>$manip</td></tr>\n";
	    print "<tr><td class=\"label\">Web:</td><td><a href=\"$url\">$url</a></td>";
	    print "<td class=\"label\">Implementation:</td><td>$impl</td></tr>\n";
	    print "<tr><td class=\"label\">Paper:</td><td colspan=3>$ref</td></tr>\n";
	    print "<tr><td class=\"label\">Description:</td><td colspan=3>$desc</td></tr>\n";
	    print "</table>\n";
	    print "</div>\n";
	} else {
	    print "<dt><a href=\"showlist.cgi?oneid=$id\">$lang</a></dt>\n";
	    print "<dd>$desc</dd>\n";
	}
}

if ( ! $concise eq "" ) { print "</dl>\n"; }

print "<div class=\"back-link\">\n";
print "<a href=\"javascript:history.back()\">&larr; Back</a>\n";
print "</div>\n";

print <<'FOOTER';
    </main>
    <footer>
        <p>&copy; Tim Thompson</p>
    </footer>
</body>
</html>
FOOTER
