@model DetailsModel
@{
}
<div class="d-flex flex-row">
    <div class="p-2">
        @Html.ActionLink("Add New Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId }, new { @class = "btn btn-sm btn-primary"})
    </div>
</div>
<br />
<table class="table table-bordered table-condensed tablesorter" cellpadding="0" cellspacing="5">
    <tr>
        <th>Step ID</th>
        <th>Version ID</th>
        <th>Step Name</th>
        <th colspan="3">Actions</th>
    </tr>
    @foreach (var stepItem in Model.SectionTemplate.StepTemplateList)
    {
    if (stepItem.IsReadOnly)
    {
    <tr class="header">
        <th>@stepItem.StepId</th>
        <th>@stepItem.VersionId</th>
        <th>@Html.Label(stepItem.StepName, new { title = stepItem.StepText })</th>
        <th>
            @Html.ActionLink("Add New Version", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = stepItem.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId, createNewVerion = true }, new { @class = "btn btn-sm btn-primary" })
        </th>
        <th></th>
        <th> @Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</th>
    </tr>
    }
    else
    {
    var indent = 0;
    foreach (var childStep in stepItem.ChildSteps)
    {
    if (childStep.ParentStepTemplateId == childStep.StepTemplateId && childStep.StepTemplateId == childStep.RootStepTemplateId)
    {
    <tr class="header">
        <th data-indent=@indent>@stepItem.StepId</th>
        <th data-indent=@indent>@stepItem.VersionId</th>
        <th data-indent=@indent>@Html.Label("",stepItem.StepName, new { title = stepItem.StepText })</th>
        <th data-indent=@indent>
            @Html.ActionLink("Edit", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = stepItem.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId }, new { @class = "btn btn-sm btn-primary" })
        </th>
        <td>
            <div class="d-flex flex-column">
                <div class="p-2">
                    @Html.ActionLink("+ New Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId,}, new { @class = "btn btn-sm btn-secondary", @title = "This action will add a new step after this step." })
                </div>
                <div class="p-2">
                    @Html.ActionLink("+ New Child Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId}, new { @class = "btn btn-sm btn-primary", @title = "This action will add a new child step to this step." })
                </div>

            </div>
        </td>
        <th data-indent=@indent>@Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</th>
    </tr>
    indent = indent + 1;
    }
    else if (childStep.ParentStepTemplateId == childStep.RootStepTemplateId && childStep.StepTemplateId != childStep.RootStepTemplateId)
    {
    <tr class="child">
        <td data-indent=@indent>.@childStep.StepId</td>
        <td data-indent=@indent>@childStep.VersionId</td>
        <td data-indent=@indent>@Html.Label("",childStep.StepName.ToString(), new { title = childStep.StepText })</td>
        <td data-indent=@indent>
            @Html.ActionLink("Edit", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId }, new { @class = "btn btn-sm btn-primary" })
        </td>
        <td>
            @Html.ActionLink("+ New Child Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId}, new { @class = "btn btn-sm btn-primary", @title = "This action will add a new child step to this step."})
        </td>
        <td data-indent=@indent> @Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</td>
    </tr>
        var childstepsforchild = stepItem.ChildSteps.Where(m => m.ParentStepTemplateId == childStep.StepTemplateId);
        foreach (var m in childstepsforchild)
        {
            m.childIndent = indent + 1;
        }
    }
    else if (childStep.ParentStepTemplateId != childStep.RootStepTemplateId)
    {
        var dots = "";
        for (int i = 0; i < @childStep.childIndent; i++)
        {
            dots = dots + ".";
        }
    <tr class="child">
        <td data-indent=@childStep.childIndent>@dots@childStep.StepId</td>
        <td data-indent=@childStep.childIndent>@childStep.VersionId</td>
        <td data-indent=@childStep.childIndent>@Html.Label("",childStep.StepName, new { title = childStep.StepText })</td>
        <td data-indent=@indent>
            @Html.ActionLink("Edit", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId, moduleTemplateId = Model.SectionTemplate.ModuleTemplateId, examTemplateId = Model.ExamTemplateId }, new { @class = "btn btn-sm btn-primary" })
        </td>
        <td>
            @Html.ActionLink("+ New Child Step", "CreateStep", "StepTemplate", new { sectionTemplateId = Model.SectionTemplate.SectionTemplateId, stepTemplateId = childStep.StepTemplateId}, new { @class = "btn btn-sm btn-primary" , @title = "This action will add a new child step to this step." })
        </td>
        <td data-indent=@childStep.childIndent> @Html.ActionLink("Remove Step", "", "StepTemplate", new { @class = "btn btn-sm btn-primary", @onclick = "javascript:return false;" })</td>
    </tr>
        var childstepsforchild = stepItem.ChildSteps.Where(m => m.ParentStepTemplateId == childStep.StepTemplateId);
        foreach (var m in childstepsforchild)
        {
            m.childIndent = childStep.childIndent + 1;
        }
    }
    }
    }
    }
</table>

<script type="text/javascript">
    $(document).ready(function () {

        //$('.child').hide();

        $('.header').click(function () {
            //var tr = $(this).parents('tr:first');
            //tr.find('.expand, .collapse').toggle();
            //$(this).toggleClass('expand').nextUntil('tr.header').toggle();
            $(this).nextUntil('tr.header').toggle();
        });

        $("td")
            .css("padding-left", function (index) {
                return 20 * parseInt($(this).data("indent")) + "px";
            });
    });
</script>