@model DashboardViewModel

@{
    ViewBag.Title = "About";
}

<h2>Dashboard</h2>

<style>
    .green {
        background-color: green;
    }

    .red {
        background-color: red;
    }
</style>

@using (Html.BeginForm("Dashboard3", "Home", FormMethod.Post, new { @id = "refresh", @class = "form-horizontal" }))
{
    <ul class="breadcrumb">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="active">@Html.ActionLink("Dashboard3", "Dashboard3", "Home")</li>
    </ul>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Sub Station</h3>
                </div>
                <div class="panel-body">
                    <select>
                        <option value="volvo"> - Select a Sub-Station - </option>
                        <option value="volvo" selected="selected">Smith Street</option>
                    </select><br /><br />
                    <div style="border:solid 2px silver">
                        Date: 14 Aug 2015 12:45<br />
                        Tap changer position: Flat
                    </div>
                </div>
            </div>
            <div style="border:solid 2px silver; text-align:center; vertical-align: middle; font-weight:bold" class="green">
                @if (Model.IsConditionNormal)
                {
                    <p style="color:white">Condition Normal</p>
                }
                else
                {
                    <p style="color:white">Loss Alarm</p>
                    <div style="text-align:left">
                        @*<p style="color:white">Transformer out: @Html.ValueFor(model => model.TransformerOut)</p>col-sm-6 control-label
    <p style="color:white">Meters recorded: @Html.ValueFor(model => model.MetersRecorded)</p>
    <p style="color:white">Power Loss: @Html.ValueFor(model => model.PowerLoss)</p>*@
                    </div>
                }
            </div>
            <br />
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Power Distribution</h3>
                </div>
                <div class="panel-body">

                    <div class="form-group">
                        @Html.LabelFor(model => model.TotalPower, new { @class = "col-sm-6 control-label", style = "text-align:left;" })
                        <div class="col-sm-6 control-label" style = "text-align:left">@Html.DisplayFor(model => model.TotalPower)</div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.TotalPower, new { @class = "col-sm-6 control-label", style = "text-align:left;" })
                        <div class="col-sm-6 control-label" style = "text-align:left">@Html.DisplayFor(model => model.TotalPower)</div>
                    </div>

                    @*<div class="form-group form-group-sm">
                            @Html.LabelFor(model => model.WorkingPower, new { @class = "col-sm-3", style = "border: solid 0px red" })
                            @Html.DisplayFor(model => model.WorkingPower)
                        </div>
                        <div class="form-group form-group-sm">
                            @Html.LabelFor(model => model.ReactivePower, new { @class = "col-sm-3", style = "border: solid 0px red" })
                            @Html.DisplayFor(model => model.ReactivePower)
                        </div>*@
                    @*<div class="form-group form-group-sm">
                            <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
                            </div>
                        </div>*@
                </div>
            </div>
            @*<div class="panel panel-default">
                Phase Voltages
                <div class="panel-body">
                    <div class="form-group">
                        @Html.LabelFor(model => model.PhaseVoltageRed, new { @class = "control-label col-xs-1" })
                        <div class="col-xs-3">
                            @Html.TextBoxFor(model => model.PhaseVoltageRed, new { @class = "form-control input-sm", style = "height: 24px;" })
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        @Html.LabelFor(model => model.PhaseVoltageYellow, new { @class = "control-label col-xs-1" })
                        <div class="col-xs-3">
                            @Html.TextBoxFor(model => model.PhaseVoltageYellow, new { @class = "form-control input-sm", @readonly = "readonly", style = "height: 24px;" })
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        @Html.LabelFor(model => model.PhaseVoltageBlue, new { @class = "control-label col-xs-1" })
                        <div class="col-xs-3">
                            @Html.TextBoxFor(model => model.PhaseVoltageBlue, new { @class = "form-control input-sm", @readonly = "readonly", style = "height: 24px;" })
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                        Phase Currents
                        <div class="panel-body">
                            <div style="border:solid 2px silver">
                                R: 476A<br />
                                B: 453A<br />
                                Y: 324A<br />
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        Power Factors
                        <div class="panel-body">
                            <div style="border:solid 2px silver">
                                R: 0.76 Lag<br />
                                B: 0.69 Lag<br />
                                Y: 0.90 Lead<br />
                            </div>
                        </div>
                    </div>

                        </div>*@
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Alarm Thresholds</h3>
                </div>
                <div class="panel-body">
                    <div style="border:solid 2px silver">
                        Loss Alarm: 10% <br />
                        Phase Imbalance: 30%
                    </div>
                </div>
            </div>
        </div>
    </div>
}


@functions
{
    public static string GetBackgroundColour(bool state)
    {
        if (state)
        {
            return "green";
        }
        else
        {
            return "red";
        }
    }
}