<%- include('partials/header',    {active: link}) %> 
<%- include('partials/breadcrumb',{active: link}) %>

                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
               <!--- <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card block.
                            </div>
                        </div>
                    </div>
                </div> -->
<%  if( detail ){  

    let isAvailable = false;
    let dbInfo = {};

    // Check to see if exxists
    _.each( docker.db, function(list){
        if( list.service == services.detail ){
            isAvailable = true;
            dbInfo = list;
        }
    });

     

    let statusLabel = 'NOT DOWNLOADED';
    let actionState = 'empty';
    
   
%>
 
 
                <div class="row">
                    <!-- Column -->
                    <div class="col-lg-4 col-xlg-3 col-md-5">
                        <div class="card">
                            <div class="card-body">
                                <center class="m-t-30"> <img id="service-icon" data="<%= services.detail %>" src="/cdn/logos/<%= services.detail %>.png" class="img-circle" width="150" />
                                    <h4 class="card-title m-t-10"><%= services.detail %></h4>
                                    <h6 class="card-subtitle"> </h6>
                                    <div class="row text-center justify-content-md-center">
<% 

 
if( isAvailable ){
    actionState = dbInfo.state;
    
    switch(dbInfo.state){
        case 'running':
            statusLabel = 'RUNNING';   
        break;  
        case 'exited':
            statusLabel = 'STOPPED';
        break;
        case 'created':
            statusLabel = 'CREATED';
        break;
    }
}
%>
     <button type="button" disabled class="btn btn-block btn-outline-info"><%= statusLabel %></button>
 
                                       
                                    </div>
                                </center>
                            </div>
                            <div>
                                <hr> 
                            </div>
                            <div class="card-body">
                                <small class="text-muted p-t-30 db">Container Web Dashboard</small>
                                <br /> 
<%
if( actionState == 'running'  ){
    switch( services.detail ){
    case 'cloudant':
%>

                                    <a   target="_blank" href="http://localhost:<%= data.dbStack[services.detail].port %>/dashboard.html" class="btn waves-effect waves-light btn-block btn-secondary"    >Dashboard Port <%= data.dbStack[services.detail].port %> ( admin/pass)</a>
<%
    break;
    case 'postgres':
%>
<a   target="_blank" href="http://localhost:<%= data.dbStack[services.detail].admin.port %>" class="btn waves-effect waves-light btn-block btn-secondary"    >Dashboard Port <%= data.dbStack[services.detail].admin.port %> ( <%= data.dbStack[services.detail].admin.user %> / <%= data.dbStack[services.detail].admin.passwd %>) </a>
<%
    break;
    case 'elasticsearch':
%>
<a   target="_blank" href="http://localhost:<%= data.dbStack[services.detail].admin.port %>" class="btn waves-effect waves-light btn-block btn-secondary"    >Dashboard Port <%= data.dbStack[services.detail].admin.port %> </a>
<a   target="_blank" href="http://localhost:<%= data.dbStack[services.detail].port %>" class="btn waves-effect waves-light btn-block btn-secondary"    >DB REST Port <%= data.dbStack[services.detail].port %> </a>
<%
    break;
    case 'mysql':
    case 'redis':
    case 'mongodb':
    case 'cassandra':
 
%>
<a   target="_blank" href="http://localhost:<%= data.dbStack[services.detail].admin.port %>" class="btn waves-effect waves-light btn-block btn-secondary"    >Dashboard Port <%= data.dbStack[services.detail].admin.port %> </a>
<%
    break;
    }// end switch
}
%>
                                <small class="text-muted p-t-30 db">Container Actions</small>
                                <br/>
<form id="actionForm" method="post" action="/databases/<%= services.detail %>/manage.html"  >
    <input type="hidden" id="formService" name="service" value="<%= services.detail %>" />
    <input type="hidden" id="formAction" name="action" value="<%= actionState %>" />
    <input type="hidden" id="formCategory" name="category" value="db" />
    <input type="hidden" id="formImage" name="image" value="<%= data.dbStack[services.detail].image %>" />
    <input type="hidden" id="formPerform" name="nextstep" value="<%= actionState %>" />
    <input type="hidden" id="formContainer" name="containerId" value="<%= dbInfo.id %>" />
</form>
<% 
    switch( actionState ){
        case 'empty':
%>
                                <button type="button"  class="btn waves-effect waves-light btn-block btn-secondary" id="sa-params-pull"  >Pull</button>
                                <!-- <button type="button" disabled class="btn waves-effect waves-light btn-block btn-secondary">Start</button>
                                <button type="button" disabled class="btn waves-effect waves-light btn-block btn-secondary">Stop</button>
                                <button type="button" disabled class="btn waves-effect waves-light btn-block btn-secondary">Remove</button> -->
<%
        break;
        case 'running':
%>
                                <!-- <button type="button"  disabled class="btn waves-effect waves-light btn-block btn-secondary">Pull</button>
                                <button type="button" disabled class="btn waves-effect waves-light btn-block btn-secondary">Start</button> -->
                                <button type="button"  class="btn waves-effect waves-light btn-block btn-secondary" id="sa-params-stop">Stop</button>
                                <!-- <button type="button" disabled class="btn waves-effect waves-light btn-block btn-secondary">Remove</button> -->
<%
break;
        case 'exited':
%>
                                <!-- <button type="button"  disabled class="btn waves-effect waves-light btn-block btn-secondary">Pull</button> -->
                                <button type="button"  class="btn waves-effect waves-light btn-block btn-secondary" id="sa-params-start">Start</button>
                               <!--  <button type="button"  disabled class="btn waves-effect waves-light btn-block btn-secondary">Stop</button> -->
                                <button type="button"   class="btn waves-effect waves-light btn-block btn-secondary" id="sa-params-remove">Remove</button>
<%
        break;
        case 'created':
%>
                                <!-- <button type="button"  disabled class="btn waves-effect waves-light btn-block btn-secondary" >Pull</button> -->
                                <button type="button" class="btn waves-effect waves-light btn-block btn-secondary" id="sa-params-start">Start</button>
                             <!--    <button type="button" disabled class="btn waves-effect waves-light btn-block btn-secondary">Stop</button> -->
                                <button type="button" class="btn waves-effect waves-light btn-block btn-secondary" id="sa-params-remove">Remove</button>
<%
        break;
    }
%>
 
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <!-- Column -->
                    <div class="col-lg-8 col-xlg-9 col-md-7">
                        <div class="card">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs profile-tab" role="tablist">
                                <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Settings</a> </li>
                                 <!-- <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Compose.YAML</a> </li> --> 
                                   <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#logs" role="tab">Logs</a> </li>  
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content tabcontent-border" style="min-height: 540px;">
                                <div class="tab-pane active" id="home" role="tabpanel">
                                    <div class="card-body">
                                        <div class="profiletimeline">
        
                                            <h3 class="box-title m-t-40">General Settings</h3>
                                            <hr>  
                                            <form action="/databases/<%= services.detail %>/manage.html" id="formContainerSettings" method="post">   
                                            <input type="hidden" name="nextstep" value="settings" />
                                            <input type="hidden" name="containerState" value="<%= actionState %>" />
                                            <input type="hidden" name="chosenDB" value="<%= services.detail %>" />
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label>Image</label>
                                                        <input type="text" id="newImage" name="newImage" class="form-control" value="<%= data.dbStack[services.detail].image %>" >
                                                    </div>
                                                </div>
                                                <!--/span-->
                                                <div class="col-md-6">
                                                     <div class="form-group">
                                                        <label>Port</label>
                                                        <input type="text" id="newPort" name="newPort" class="form-control" value="<%= data.dbStack[services.detail].port %>" >
                                                    </div>   
                                                </div>
                                                <!--/span-->
                                            </div>                                      
                                            <div class="row">
                                                <div class="col-md-6">
                                        <%
                                        switch( services.detail ){
                                            case 'postgres':
                                        %>
                                                     <div class="form-group">
                                                        <label>User POSTGRES Password</label>
                                                        <input type="text" id="newPass" name="newPass" class="form-control" value="<%= data.dbStack[services.detail].env.passwd %>" >
                                                    </div>  
 
                                        <%
                                            break;
                                            case 'mssql':
                                        %>
                                                     <div class="form-group">
                                                        <label>SA Password</label>
                                                        <input type="text" id="newPass" name="newPass" class="form-control" value="<%= data.dbStack[services.detail].env.passwd %>" >
                                                    </div>  
                                        <%
                                            break;
                                            case 'mysql':
                                        %>
                                                     <div class="form-group">
                                                        <label>Root Password</label>
                                                        <input type="text" id="newPass" name="newPass" class="form-control" value="<%= data.dbStack[services.detail].env.passwd %>" >
                                                    </div>  

                                        <%
                                            break;
                                            case 'redis':
                                        %>
                                                     <div class="form-group">
                                                        <label>Web Dashboard Port</label>
                                                        <input type="text" id="newAdminPort" name="newAdminPort" class="form-control" value="<%= data.dbStack[services.detail].admin.port %>" >
                                                    </div>
                                        <%
                                            break;
                                            case 'mongodb':
                                        %>
                                                     <div class="form-group">
                                                        <label>Web Dashboard Port</label>
                                                        <input type="text" id="newAdminPort" name="newAdminPort" class="form-control" value="<%= data.dbStack[services.detail].admin.port %>" >
                                                    </div>  
                                        <%
                                            break;
                                        }

                                        %>
                                                </div>
                                                <!--/span-->
                                                <div class="col-md-6">
                                        <%
                                        switch( services.detail ){
                                            case 'postgres':
%>
                                           

                                                    <div class="form-group">
                                                        <label>Web Dashboard User Passwd</label>
                                                        <input type="text" id="newAdminPass" name="newAdminPass" class="form-control" value="<%= data.dbStack[services.detail].admin.passwd %>" >
                                                    </div>  
                                                    <div class="form-group">
                                                        <label>Web Dashboard User Email</label>
                                                        <input type="text" id="newAdminUser" name="newAdminUser" class="form-control" value="<%= data.dbStack[services.detail].admin.user %>" >
                                                    </div> 
<%
                                            break;
                                            case 'mysql':
%>
                                                     <div class="form-group">
                                                        <label>Web Dashboard Port</label>
                                                        <input type="text" id="newAdminPort" name="newAdminPort" class="form-control" value="<%= data.dbStack[services.detail].admin.port %>" >
                                                    </div>  
<%
                                            break;
                                            case 'elasticsearch':
%>
                                                     <div class="form-group">
                                                        <label>Web Dashboard Port</label>
                                                        <input type="text" id="newAdminPort" name="newAdminPort" class="form-control" value="<%= data.dbStack[services.detail].admin.port %>" >
                                                    </div>
<%
                                            break;
                                            case 'cassandra':
%>
                                                     <div class="form-group">
                                                        <label>Web Dashboard Port</label>
                                                        <input type="text" id="newAdminPort" name="newAdminPort" class="form-control" value="<%= data.dbStack[services.detail].admin.port %>" >
                                                    </div>
<%
                                            break;
                                            
                                            
                                        }
                                        %>
                                                </div>
                                                <!--/span-->
                                            </div> 
                                            <div >
                                                <div class="form-actions">
                                                <% if( actionState == 'running'){ %>
                                                    <button type="buttom"  disabled class="btn btn-warning"> <i class="fa fa-check"></i> Disabled While Service Running</button>
                                                <% } else { %>
                                                    <button type="button"  id="sa-warning" class="btn btn-success"> <i class="fa fa-check"></i> Save</button>
                                                <% } %>
                                                    
                                                </div>                                       
                                            </div>
                                            </form>

 
 
                                        </div>
                                    </div>
                                </div>
                                <!--second tab-->
                                <!--  -->
                                 <!--  <div class="tab-pane" id="profile" role="tabpanel">
                                    <div class="card-body">
                                        <div class="form-group" id="editoryaml"   >
                                        <textarea  class="form-control" readonly rows="20" spellcheck="false"> <%= services.yaml %></textarea>
                                           
                                        </div>
                                    </div>
                                </div>  -->
                                  <div class="tab-pane" id="logs" role="tabpanel">
                                    <div class="card-body">
                                        <div id="slimlogs"><%
                                         _.each(services.logs,function(line){  %>
                                            <%= line; %>
                                            <br><br>
                                        <% });  %>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                </div>
<% } %>

                <div class="row" >
                    <div class="col-lg-7">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Databases Listing Overview</h4>
                                <%# <h6 class="card-subtitle">Add class <code>.table-hover</code></h6> %>
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>DB Name</th>
                                                <th>Image</th>
                                                
                                                <th>Port</th>
                                                 <th>Admin</th>
                                            </tr>
                                        </thead>
                                        <tbody>
<%
    _.each(services.db, function(item){
%>
                                            <tr>
                                                 
                                                <td><A href="/databases/<%= item %>/manage.html"><%= item.toUpperCase() %></a></td>
                                                <td><span class="peity-line" data-width="120" data-peity='{ "fill": ["#009efb"], "stroke":["#009efb"]}' data-height="40"><%= data.dbStack[item].image.substr(0,25) %></span> </td>
                                                <td><span class="text-danger text-semibold"><i class="fa fa-level-down" aria-hidden="true"></i> <%= data.dbStack[item].port %></span> </td>
                                              <td><span class="text-danger text-semibold"><i class="fa fa-level-down" aria-hidden="true"></i> <% if( data.dbStack[item].admin.port > 0 ){ %> <%= data.dbStack[item].admin.port %> <% }  %></span> </td>
                                            </tr>
<%
    });
%>

                                          
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">DB Status Overview</h4>
                                <ul class="feeds">

<%
    if( docker.db.length > 0 ){

        _.each( docker.db, function(item){
                    let currentClass = "";
        switch( item.state ){
            case 'running': currentClass="bg-success"; break;
            case 'exited': currentClass="bg-danger"; break;
            case 'created': currentClass="bg-inverse"; break;
        }
%>
    <li>
        <div class="<%= currentClass %>"><i class="ti-server  text-white"></i></div><%= item.service %> (<%= item.state %>) <span class="text-muted"><%= item.status %></span>
    </li>   
<%
        });

    } else {
%>
<li>
    <div class="bg-info"><i class="far fa-bell text-white"></i></div> No Containers available. <span class="text-muted">Just Now</span>
</li>
<%                                  
    }
%>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
 
 
<%- include('partials/footer') %>