@using Synthesis.Admin.Models.UpdaterService
@model IEnumerable<StepInputModel>

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section breadcrumb
{
    <ol class="breadcrumb bc-3">
        <li>
            <a href="~/"><i class="fa-home"></i>Home</a>
        </li>
        <li>
            <a href="@Url.Action("Index", "Versions")">Versions</a>
        </li>
        <li>
            <a href="@Url.Action("Details", "Versions", new { Id = ViewBag.VersionId })">@ViewBag.VersionId</a>
        </li>
        <li class="active">
            <strong>Steps</strong>
        </li>
    </ol>
}

@{
    var installationSteps = Model.Where(x => x.Type == "INSTALLATION").OrderBy(x => x.Order).ToList();
    var verificationSteps = Model.Where(x => x.Type == "VERIFICATION").OrderBy(x => x.Order).ToList();
}

<div id="installation-steps" class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-12 text-center"><h3>Verification steps</h3></div>
        </div>
        <div class="row">
            <div class="col-xs-2"><strong>Action type</strong></div>
            <div class="col-xs-4"><strong>Body</strong></div>
            <div class="col-xs-4"><strong>Expected result</strong></div>
            <div class="col-xs-2"><strong>Actions</strong></div>
        </div>
        <div class="row">
            <div class="col-xs-12" id="verification-steps-container">
                @if (verificationSteps.Count > 0)
                {
                    foreach (StepInputModel step in installationSteps)
                    {
                        <div class="row" data-step-id="@step.Id">
                            <div class="col-xs-2" data-type="action-type">
                                @step.ActionType
                            </div>
                            <div class="col-xs-4" data-type="body">
                                @step.Body
                            </div>
                            <div class="col-xs-4" data-type="expected-result">
                                @step.ExpectedResult
                            </div>
                            <div class="col-xs-2" data-type="expected-result">
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-pencil"></i>
                                </a> |
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-up"></i>
                                </a> |
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-down"></i>
                                </a> |
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-erase"></i>
                                </a>
                            </div>
                        </div>
                    }
                }
            </div>
        </div>
    </div>
</div>

<div id="installation-steps" class="row">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-12 text-center"><h3>Verification steps</h3></div>
        </div>
        <div class="row">
            <div class="col-xs-2"><strong>Action type</strong></div>
            <div class="col-xs-4"><strong>Body</strong></div>
            <div class="col-xs-4"><strong>Expected result</strong></div>
            <div class="col-xs-2"><strong>Actions</strong></div>
        </div>
        <div class="row">
            <div class="col-xs-12" id="verification-steps-container">
                @if (verificationSteps.Count > 0)
            {
                foreach (StepInputModel step in verificationSteps)
                {
                        <div class="row" data-step-id="@step.Id">
                            <div class="col-xs-2" data-type="action-type">
                                @step.ActionType
                            </div>
                            <div class="col-xs-4" data-type="body">
                                @step.Body
                            </div>
                            <div class="col-xs-4" data-type="expected-result">
                                @step.ExpectedResult
                            </div>
                            <div class="col-xs-2" data-type="expected-result">
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-pencil"></i>
                                </a> |
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-up"></i>
                                </a> |
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-down"></i>
                                </a> |
                                <a href="#" data-step-id="@step.Id">
                                    <i class="entypo-erase"></i>
                                </a>
                            </div>
                        </div>
                    }
                }
            </div>
        </div>
    </div>
</div>

@section scripts {
    @Scripts.Render("~/Scripts/StepsEdit.js")
}