@model string[]
@{
    ViewData["Title"] = "WM Out";
}

<style>
    html,
    body {
        height: 100%;
    }

    div.container-fluid {
        height: 90%;
    }

    #HeaderGrid,
    #FieldsGrid {
        font-size: 12px;
    }

    .FieldTitle {
        font-weight: bold;
    }
</style>

<table>
    <tr>
        <td>
            <label for="scan">WM Out:</label>
        </td>
        <td>
            <label for="username">Username:</label>
        </td>
        <td>
            <span>&nbsp;</span>
        </td>
    </tr>
    <tr>
        <td>
            <div class="form-group">
                <input class="txt txt-primary" type="input" id="scan" value="" />
            </div>
        </td>
        <td>
            <div class="form-group">
                <input class="txt txt-primary" type="input" id="username" value="" />
            </div>
        </td>
        <td>
            <div class="form-group">
                <input class="btn btn-warning" type="button" value="Restart" id="restartButton" />
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <input class="btn btn-primary" type="button" id="layer1" value="Layer 1" />
        </td>
        <td>
            <input class="btn btn-primary" type="button" id="layer2" value="Layer 2" />
        </td>
        <td>
            <input class="btn btn-primary" type="button" id="layer3" value="Layer 3" />
        </td>
    </tr>
    <tr>
        <td>
            <input class="btn btn-primary" type="button" id="runDataSheet1" value="" />
        </td>
        <td>
            <input class="btn btn-primary" type="button" id="runDataSheet2" value="" />
        </td>
        <td>
            <input class="btn btn-primary" type="button" id="runDataSheet3" value="" />
        </td>
    </tr>
    <tr>
        <td>
            <input class="btn btn-primary" type="button" id="runDataSheet4" value="" />
        </td>
        <td>
            <input class="btn btn-primary" type="button" id="runDataSheet5" value="" />
        </td>
        <td>
            <input class="btn btn-primary" type="button" id="runDataSheet6" value="" />
        </td>
    </tr>
</table>

<div style="height: 300px;" id="cassetteGridDiv">
    <table id="cassetteGrid"></table>
</div>

<script>
    $(document).ready(function () {
        $("#layer1").click(function () { layer(1) });
        $("#layer2").click(function () { layer(2) });
        $("#layer3").click(function () { layer(3) });
        $("#runDataSheet1").click(function () { runDataSheet(1, $(this).val()) });
        $("#runDataSheet2").click(function () { runDataSheet(2, $(this).val()) });
        $("#runDataSheet3").click(function () { runDataSheet(3, $(this).val()) });
        $("#runDataSheet4").click(function () { runDataSheet(4, $(this).val()) });
        $("#runDataSheet5").click(function () { runDataSheet(5, $(this).val()) });
        $("#runDataSheet6").click(function () { runDataSheet(6, $(this).val()) });
        $("#restartButton").click(function () { restartButton() });
        initWorkMaterial("@ViewBag.ApiUrl");
    });
</script>