@(rootAccountName: String, zoneId: String)(implicit request: play.api.mvc.Request[Any], customLinks: models.CustomLinks, meta: models.Meta)
@import zoneTabs._

@content = {
    <!-- PAGE CONTENT -->
    {{
        @* Passes params from play to angular *@
        zoneId="@zoneId";
        ""
    }}

    <div class="right_col" role="main" >

        <!-- START BREADCRUMB -->
        <ul class="breadcrumb">
            <li><a href="/">Home</a></li>
            <li><a href="/zones">Zones</a></li>
            <li class="active">{{zoneInfo.name}}</li>
        </ul>
        <!-- END BREADCRUMB -->

        <!-- PAGE TITLE -->
        <div class="page-title">
            <h3><span class="fa fa-table"></span> {{ zoneInfo.name }}
                <span class="label label-{{ getZoneStatusLabel() }}">{{ zoneInfo.status }}</span>
            </h3>
        </div>
        <!-- END PAGE TITLE -->

        <!-- PAGE CONTENT WRAPPER -->
        <div class="page-content-wrap">

            <div class="alert-wrapper">
                <div ng-repeat="alert in alerts">
                    <notification ng-model="alert"></notification>
                </div>
            </div>

            <!-- START VERTICAL TABS -->
            <div class="panel panel-default panel-tabs">
                <ul class="nav nav-tabs bar_tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Manage Records</a></li>
                    <li><a id="tab2-button" href="#tab2" data-toggle="tab">Manage Zone</a></li>
                    <li><a href="#tab3" data-toggle="tab">Change History</a></li>
                </ul>
                <div class="panel-body tab-content">

                    <div class="tab-pane active" id="tab1">
                        @manageRecords(request, meta)
                    </div>
                    <div class="tab-pane" id="tab2" ng-controller="ManageZonesController">
                        @manageZone(request, meta)
                    </div>
                    <div class="tab-pane" id="tab3">
                        @changeHistory(request)
                    </div>
                </div>
            </div>
            <!-- END VERTICAL TABS -->

            <recordmodal></recordmodal>

      </div>
      <!-- END PAGE CONTENT WRAPPER -->

  </div>
  <!-- END PAGE CONTENT -->
}

@plugins = {
    <script type='text/javascript' src='/public/js/ui.js'></script>
}

@main(rootAccountName)("RecordsController")("Zone")(content)(plugins)