@page
@model IndexModel
@{
    Model.token = Request.Cookies["Auth"];
    ViewData["Title"] = "Command";
}

@if (string.IsNullOrEmpty(Model.token))
{
    <form asp-page-handler="SetToken" method="post">
    <div class="card" id="login_card">
        <div class="card-header">
            Login with Token
        </div>
        <div class="card-body">
            <p class="card-text">Enter your authorization token below. This token is stored locally, in your browser and
                not on the NikolaNet Server.</p>
            <input asp-for="token" id="token" />
        </div>
        <div class="card-footer">
            <button class="btn btn-default">Submit</button>
        </div>
    </div>
</form>
}
else
{
    <div class="card-deck" style="display: none;">

        <input id="json_data" type="hidden" value="" />
        <div class="card">
            <div class="card-header">
                <h5 class="card-title" id="vehicle_name">Vehicle Name</h5>
                <p class="card-subtitle mb-2 text-muted" id="vehicle_vin"></p>
            </div>
            <div class="card-body">
                <p class="card-text">Current Battery Status: <a id="battery_level"></a>%</p>
                <p class="card-text">Range: <a id="battery_range"></a> <a id="range_units"></a></p>
            </div>
            <div class="card-footer">
                <a href="#" class="card-link" target="_blank" rel="noopener noreferrer" id="locate_vehicle_btn">Locate
                    Vehicle</a>
                <a href="/?handler=Command&command=@Tesla.BasicCommands.Flash" class="card-link">Flash</a>
                <a href="/?handler=Command&command=@Tesla.BasicCommands.Honk" class="card-link">Honk</a>
                <a href="/?handler=Command&command=door_lock" class="card-link" id="lock_unlock_btn">Lock</a>

            </div>
        </div>

        <div class="card">
            <div class="card-header">
                Climate
            </div>
            <div class="card-body">
                <p class="card-text">Climate Status: <a id="climate_status"></a></p>
                <p class="card-text">Outside Temp: <a id="outside_temp"></a> <a class="temp_units"></a></p>
                <p class="card-text">Inside Temp: <a id="inside_temp"></a> <a class="temp_units"></a></p>
                <p class="card-text">Climate Set Temp: <input asp-for="climateTemp" size="3" type="number"
                        id="climate_setting" maxlength="3" /><a class="temp_units"></a>
                </p>
            </div>
            <div class="card-footer">

                <a href="#" id="climate_btn" onclick="runClimate();">Start Climate</a>

            </div>
        </div>


        <div class="card" id="charge_state_card" style="display: none;">
            <div class="card-header">
                Charge Status
            </div>
            <div class="card-body">
                <p class="card-text">Connected Cable: <a id="connected_cable"></a></p>
                <p class="card-text">Status: <a id="connection_ind"></a></p>
                <p class="card-text">Current power: <a id="current_current"></a> kW</p>
                <p id="till_full" class="card-text" style="display: none;">Time till full: <a id="time_to_full"></a></p>
            </div>

            <div class="card-footer">
                <a asp-page-handler="Command" id="charge_ctrl_btn" class="card-link">Stop Charging</a>
                <a asp-page-handler="Command" id="toggle_charge_port" class="card-link">Unlock Charge Port</a>

            </div>
        </div>

        <div class="card" id="driving_card" style="display: none;">
            <div class="card-header">
                Driving Status
            </div>
            <div class="card-body">
                <p class="card-text">Shift State: <a id="drive_state"></a></p>
                <p class="card-text">Current Speed: <a id="curr_speed"></a></p>
            </div>
        </div>



    </div>
}