@model PlaysetModel

@{
    ViewData["Title"] = $"Play with {Model.Name}";
}

<header id="play_menu">
    <ul>
        <li>
            <button class="mdc-button mdc-button--icon-trailing" data-rel="reset">
                <span class="mdc-button__ripple"></span>
                <span class="mdc-button__label">Reset</span>
                <i class="material-icons mdc-button__icon" aria-hidden="true">restart_alt</i>
            </button>
        </li>
        <li class="mdc-typography--button">Sets</li>
    </ul>
</header>
<article id="play_area" style="background-color: #@Model.BorderColor">
    <canvas id="play_space" style="height: @(Model.Height)px; width: @(Model.Width)px" height="@Model.Height" width="@Model.Width"></canvas>
</article>
@section Scripts
{
    <script>
        document.kisekae.load("play_space", "play_menu", @Json.Serialize(Model))
    </script>
}