<%
/*
* Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
*   WSO2 Inc. licenses this file to you under the Apache License,
*   Version 2.0 (the "License"); you may not use this file except
*   in compliance with the License.
*   You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
*   Unless required by applicable law or agreed to in writing,
*   software distributed under the License is distributed on an
*   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
*   KIND, either express or implied.  See the License for the
*   specific language governing permissions and limitations
*   under the License.
*/
%>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample Overview | WSO2 Cloud-Admin Portal</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap-3.2.0/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/fontwso2-1.2/css/font-wso2.css">
    <link href="../css/font-awesome-4.2.0/font-awesome.min.css" rel="stylesheet">
    <link href="../css/web-fonts/Roboto.css" rel="stylesheet">
    <link href="../css/datatables-1.10.7/jquery.dataTables.min.css" rel="stylesheet">
    <link href="../css/datatables-1.10.7/dataTables.responsive.css" rel="stylesheet">
    <link href="../css/datatables-1.10.7/jquery.dataTables.override.css" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
    <link rel="shortcut icon" href="../images/favicon.png">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<%
include("/templates/header.jag");
%>


<input type="hidden" value="" id="uniqueid">
<input type="hidden" value="false" id="disabled">

<!-- BOF App  menu -->
<div class="navbar navbar-secondary">
    <div class="container-fliud">
        <div class="row">
            <div class="side-pane-trigger">
                <i class="fa fa-reorder"></i>
            </div>
            <div class="breadcrumb-secondary">
                <i class="fw fw-security "></i> <span class="hidden-xs">Identity Cloud&nbsp;</span> / Admin Portal / Overview
            </div>
        </div>
    </div>
</div><!-- EOF App  menu -->
<div class="inner-wrapper">
    <!-- left pane wrapper -->
    <%include("/templates/leftpane.jag");%>
    <!-- left pane wrapper -->
    <div class="right-pane">

        <div class="container-fluid app-overview-section">
            <div class="row padding-bottom-xlg">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 forms">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="message message-warning sample-userstore-msg">
                                <span><i class="icon fw fw-warning"></i>You are running with a sample user store. Do not forget to connect an actual user store.</span>
                                <button class="btn cu-btn cu-btn-md cu-btn-blue pull-right connect-btn" onclick="window.location.href='/<%=ADMIN_PORTAL_NAME%>/directories/downloadagent'">
                                    <span>Connect your User Store &nbsp;&nbsp;<i class="fw fw-settings fw-lg"></i></span>
                                </button>
                            </div>

                        </div>
                    </div>
                    </br>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="block-msg">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <span class="config-details">Sample User Directory</span>
                                        <div class="noti-success connection-check">
                                            <span class="fw-stack btn-action-ico noti-success">
                                                <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                <i class="fw fw-check fw-stack-1x"></i>
                                            </span>
                                            <span class="connection-status config-details">Configured</span>
                                        </div>
                                        <span class="v-ruler "></span>
                                        <a href="#" onclick="urlResolver('directory');">
                                            <span class="add-padding-left-5x secondary-link">View</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="block-general">
                                <div class="row" style="padding : 15px">

                                    <div class="col-xs-12 col-md-5 col-lg-5">
                                        <div class="block-life-cycle">
                                            <span class="block-number">
                                                <span id="appCount" style="font-size: 120%"> 0</span>
                                            </span>
                                            <div class="block-icon pull-left">
                                                <i class="fw  " style="font-size: 8em;"></i>
                                            </div>
                                            <span class="block-text" id="appText">Sample Applications</span>
                                            <div class="clearfix"></div>
                                            </br>
                                            <!-- BOF permission based icon section -->
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                                                       <a onclick="removeSampleConfigurations(this);" class="btn block-action-button add-margin-right-2x">
                                                              <span id="removeSamplesSpan" class="fw-stack fw-delete ">
                                                                <i  id="removeSampleiId" class="fw fw-circle-outline fw-stack-2x "></i>
                                                            </span> Remove Samples
                                                        </a>
                                                        <a  onclick="urlResolver('addApp', userName)" class="btn block-action-button">
                                                            <span class="fw-stack fw-add ">
                                                                <i class="fw fw-circle-outline fw-stack-2x"></i>
                                                            </span> Add Application
                                                        </a>
                                                </div>

                                            </div>
                                            <!-- EOF permission based icon section -->
                                        </div>
                                    </div>

                                    <div class="col-xs-12 col-md-7 col-lg-7">
                                        <div  class="row row-centered app-listing" style="top:1em">
                                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 pull-right hide">
                                                 <div class="cloud-app-listing app-color-one view-all" onclick="urlResolver('applist', userName)">
                                                       <div class="text-viewAll">
                                                            <span>+</span><span id="viewAllCount"></span>
                                                       </div>

                                                       <div class="app-icon"></div>
                                                       <div class="app-name" >See All</div>
                                                 </div>
                                            </div>
                                            <div id="ovr-app-listing"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div><!-- /.container -->
            </div>
            <div class="clearfix"></div>
            <div id="push"></div>
        </div>
        </div>
        </div>
        </div>
        <%include("/templates/footer.jag");%>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="../js/jquery-1.11.1/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="../js/bootstrap-3.2.0/bootstrap.min.js"></script>
        <script src="../js/custom/constants.js"></script>
        <script src="../js/custom/custom.js"></script>
        <script src="../serviceproviders/custom/js/constants.js" type="text/javascript"></script>
       <script src="../serviceproviders/custom/js/listsp.js" type="text/javascript"></script>

        <script>
            $('.side-pane-trigger').click(function () {
                var rightPane = $('.right-pane');
                var leftPane = $('.left-pane');
                if (rightPane.hasClass('visible')) {
                    rightPane.animate({"left": "0em"}, "slow").removeClass('visible');
                    leftPane.animate({"left": "-18em"}, "slow");
                    $(this).find('i').removeClass('fa-arrow-left').addClass('fa-reorder');
                } else {
                    rightPane.animate({"left": "18em"}, "slow").addClass('visible');
                    leftPane.animate({"left": "0em"}, "slow");
                    $(this).find('i').removeClass('fa-reorder').addClass('fa-arrow-left');
                }
            });
        </script>

        <script>
            var json = null;
            var userName = null;
            userName = "<%=session.get('user')%>";

           // this method is using above user name. So need to wait until it loads. Need to handle proper way
           $(document).ready(function(){

            var intervalVar = setInterval(function () {
            var appList = checkAppList(userName);
            if (appList) {
                if (appList.length  == 2 && appList[0].applicationName === APP_NAME1 &&
                                                    appList[1].applicationName === APP_NAME2) {
                    $("#appCount").html("2");
                    $("#appText").html("Sample Applications");
                    drawListOverview(appList);
                } else {
                    $("#appCount").html(appList.length);
                     drawListOverview(appList);


                     if(appList.length == 1){
                         $("#appText").html("Application");
                     } else {
                         $("#appText").html("Applications");
                     }
                }
            } else {
                    $("#appCount").html("0");
                    $("#appText").html("Application");
            }
                clearTimeout(intervalVar);
            }, 200);


           });

           function removeSampleConfigurations(element) {
             $("#removeSamplesSpan").removeClass("fw-delete");
             $("#removeSampleiId").addClass("fw-loader5 fw-spin fw-2x");
             $(element).addClass("disabled");

             deleteCustomSPWithoutRefresh(APP_NAME1);
             deleteCustomSPWithoutRefresh(APP_NAME2);
             deleteDirectory(SAMPLE_USER_STORE_DOMAIN);
             urlResolver('overview', userName);
           }
        </script>
</body>
</html>
