@model Ks.Sf.Web.Model.OpaHeaderController.OpaHeaderView

@using Telerik.Sitefinity.Services;
@using Telerik.Sitefinity.Modules.Pages;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Ks.Sf.Web.Mvc.Controllers;
@using ServiceStack
@using Telerik.Sitefinity.Frontend.Navigation.Mvc.Models

@{
    var searchTextBoxId = Guid.NewGuid();
    var searchButtonId = Guid.NewGuid();
    var currentTopLevelNodeUrl = string.Empty;
}

@Html.Script(ScriptRef.JQuery, "top", false)
@Html.Script(Url.WidgetContent("Mvc/Scripts/Angular/angular.min.js"), "top")

<div ng-app="opaHeaderApp">
    <div ng-controller="opaHeaderCtrl">
        <nav class="navbar navbar-default">
            <div class=" container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="@Model.RootNodeUrl" class="navbar-brand"><img src="@Model.ImageUrl" class="img-responsive" /></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <div class="navbar-form navbar-right">
                        <form>
                            <div class="inner-addon left-addon search-container">
                                <span class="glyphicon glyphicon-search"></span>
                                <input type="text" title="@Html.Resource("SearchInput")" class="form-control" placeholder="Search" value="@Html.Raw(ViewBag.SearchQuery)" id="@Html.Raw(searchTextBoxId)">
                                <button style="display: none;" id="@Html.Raw(searchButtonId)"></button>

                                <input type="hidden" data-sf-role="resultsUrl" value="@Model.SearchResultsUrl" />
                                <input type="hidden" data-sf-role="indexCatalogue" value="@Model.SearchIndex" />
                                <input type="hidden" data-sf-role="wordsMode" value="AllWords" />
                                <input type="hidden" data-sf-role="disableSuggestions" value='false' />
                                <input type="hidden" data-sf-role="minSuggestionLength" value="3" />
                                <input type="hidden" data-sf-role="suggestionFields" value="Title,Content" />
                                <input type="hidden" data-sf-role="language" value="" />
                                <input type="hidden" data-sf-role="suggestionsRoute" value="/restapi/search/suggestions" />
                                <input type="hidden" data-sf-role="searchTextBoxId" value='@("#" + searchTextBoxId.ToString())' />
                                <input type="hidden" data-sf-role="searchButtonId" value='@("#" + searchButtonId.ToString())' />
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-nav navbar-right tk-proxima-nova">
                        @foreach (var node in Model.Nodes)
                        {
                            if (node.IsCurrentlyOpened || node.HasChildOpen) { currentTopLevelNodeUrl = node.Url; }
                            <li>
                                <div>
                                    @if (node.ChildNodes.Count > 0)
                                    {
                                        <a href="@node.Url" class="@if(node.IsCurrentlyOpened || node.HasChildOpen) {<text>active</text>}">
                                            @node.Title
                                        </a>
                                        <span data-toggle="dropdown" class="glyphicon stage-arrow dropdown-toggle" ng-class="'@node.Url' === currentNodeUrl && subMenuExpanded ?  'glyphicon-menu-up' : 'glyphicon-menu-down'" ng-click="toggle('@node.Url')"></span>
                                    }
                                    else
                                    {
                                        <a class="@if(node.IsCurrentlyOpened || node.HasChildOpen) {<text>active</text>}" href="@node.Url">@node.Title</a>
                                    }

                                    @if (node.ChildNodes.Count > 0)
                                    {
                                        <ul class="dropdown-menu">
                                            @foreach (var childNode in node.ChildNodes)
                                            {
                                                <li><a href="@childNode.Url" target="_self">@childNode.Title</a></li>
                                            }
                                        </ul>
                                    }
                                </div>
                            </li>
                        }
                    </ul>
                </div>
            </div>
        </nav>

        @foreach (var node in Model.Nodes)
        {
            if (node.ChildNodes.Count > 0)
            {
                <div class="subNav tk-proxima-nova  hidden-md hidden-sm hidden-xs" style="width: 100%;" ng-show="'@node.Url' === currentNodeUrl && subMenuExpanded">
                    <div class="container">
                        <ul>
                            @foreach (var childNode in node.ChildNodes)
                            {
                                <li><a class="@if (childNode.IsCurrentlyOpened || childNode.HasChildOpen) {<text>active</text>}" href="@childNode.Url">@childNode.Title</a></li>
                            }
                        </ul>
                    </div>
                </div>
            }
        }
    </div>
</div>

<script>
    var myApp = angular.module('opaHeaderApp', []);

    myApp.controller('opaHeaderCtrl', ['$scope', function ($scope) {
        $scope.subMenuExpanded = true;
        $scope.nodes = [];
        $scope.currentNodeUrl = '@currentTopLevelNodeUrl';

        $scope.toggle = function (nodeUrl) {
            if (nodeUrl === $scope.currentNodeUrl) {
                $scope.subMenuExpanded = !$scope.subMenuExpanded;
            } else {
                $scope.subMenuExpanded = true;
            }
            $scope.currentNodeUrl = nodeUrl;
        }

    }]);
</script>

@Html.Script(Url.WidgetContent("Mvc/Scripts/SearchBox/Search-box.js"), "bottom", false)