<!DOCTYPE html>
<html>
<head>
    <title>MtG Card Data Gatherer</title>
    <style>
        * {
            box-sizing: border-box;

            font-family: sans-serif;
            font-size: 12pt;
        }
        h1 {
            font-size: 2rem;
            border-bottom: 0.2rem solid lightgray;
            display: inline-block;
        }

        div.table {
            display: table;
            max-width: 800px;
            width: 100%;
            border: 1px solid lightgray;
            margin: 1em 0;
        }

        div.table>div.row {
            display: table-row;
            margin-right: 0.5em;
        }
        div.table>div:nth-child(2n+1) {
            background-color: #eeeeee;
        }

        div.table>div.row>* {
            display: table-cell;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
        }
        div.table>div.row>:first-child {
            vertical-align: top;
            padding: 0.5em;
            padding-right: 1em;
            width: 200px;
            font-weight: bold;
        }
        div.table div.row>:not(:first-child) {
            width: 100%;
            margin-right: 0.5em;
        }

        textarea#query {
            font-family: monospace;
        }
        button[type=submit] {
            border: 0.25em solid hsl(224, 78%, 90%);
            border-radius: 0.5em;
            padding: 0.5em 0.8em;
            background-color: hsl(224, 78%, 75%);
            font-weight: bold;
        }
        button[type=submit]:hover {
            border-color: hsl(224, 78%, 75%);
            background-color: hsl(224, 78%, 90%);
        }
    </style>
</head>
<body>
    <h1>MtG Card Data Gatherer</h1>
<?php

require 'vendor/autoload.php';
$engine = new StringTemplate\Engine;

//$context = stream_context_create(['wrapper' => [
//    'user_agent' => '',
//    'protocol_version' => 1.1
//]]);


function get_card_data($set, $num) {
    $fp = fopen('https://api.magicthegathering.io/v1/cards?set=' . $set . '&number=' . $num, 'r');
    $meta = stream_get_meta_data($fp);
    $content = stream_get_contents($fp);
    fclose($fp);

    var_dump($meta);
    var_dump(json_decode($content, true)['cards'][0]);
}


if (isset($_REQUEST['query'])) {
    $q = $_REQUEST['query'];
    $template = $_REQUEST['format'];

    $lines = explode("\n", $q);

    echo '<pre style="font-family: monospace; background-color: lightgray; border-radius: 5px; padding: 3px 6px;">';
    foreach ($lines as $line) {
        $parts = explode(' ', $line);

        echo $engine->render($template, $parts);
        get_card_data($parts[0], $parts[1]);
        echo "\n";
    }
    echo '</pre><hr>';
}
?>
    <form method=post>
        <div class="table">
            <div class="row">
                <label for="format">Output Format:</label>
                <input type="text" id="format" name="format" <?= $_REQUEST['format'] ? "value=\"$_REQUEST[format]\"" : '' ?>>
            </div>
            <div class="row">
                <label for="query">Cards:</label>
                <textarea id="query" name="query" rows="20" placeholder="M12 120
ORI 53
AER 178">M12 120
ORI 53
AER 178</textarea>
            </div>
            <div class="row">
                <span></span>
                <button type="submit">Submit</button>
            </div>
        </div>
    </form>
</body>
</html>