<?php include 'views/_header.tpl.php'; ?>

<script type="text/javascript">
</script>

<style type="text/css">
.spacer {
    padding-top: 60px;
}
.hidden, #mmen {display: none;}
#current_user_id,
#current_user_status {display:none;}
.nav-category > li .iPlugGray {
    position: absolute;
    top: 19px;
    left: 5px;
}
.nav-category > li .fa-angle-right {
    position: absolute;
    top: 20px;
    height:50px;
    line-height:50px;
    right: 5px;
    color:#ccc;
    font-size:18px;
}
.nav-category > li {
    margin: 0px 0;
    padding: 15px 22px;
    position: relative;
    font-weight:300;
    font-family: 'Open Sans';
    border-bottom:1px solid #eee;
    background:#fff;
    height:auto; 
    min-width:330px; 
    max-width:330px; 
    display:inline-block; 
    overflow:hidden;
}
.nav-category > li:hover {
    background:#eee;
}
.nav-category > li > a {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    font-size: 1.077em;
    height: 50px;
    width: 300px;
    max-width:300px;
    line-height: 50px;
    transition: none;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
}
.top-project-info { max-height: 200px; }
.project-short.sml-thumb .top-project-info {
    padding: 0px;
}
h1 { margin-bottom:7px; }
.search-result-page .top-lbl-val {
    padding-bottom: 0px;
}
#hdrsearch { display:none; }
.form-search .btn-search {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 16px;
    height: 16px;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    line-height: 0;
}
.form-search .txt-keyword { 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
    padding-left:4%;
    width:96%;
}
.ajaxsearch {
    background:#333;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    vertical-align: middle;
}
#bottominfo { position:absolute; bottom:0; background: rgba(0,0,0,.75); width:94%; padding:3%; }
#bottominfo a { color:#fff; font-family: 'Open Sans',sans-serif; font-weight:300; text-shadow:0px -1px 1px rgba(0,0,0,.9); }
#bottominfo a:hover { color:#5CAEE8 !important; }
#footer { padding-top:0px; }
.main-footer { display:none; }

/******************************************************************************/ 
@media screen and (max-device-width:  979px), screen and (max-width:  979px) {
    .form-search .txt-keyword { 
        padding-left:5%;
        width:95%;
    }   
}

/******************************************************************************/ 
@media screen and (max-device-width:  767px), screen and (max-width:  767px) {
    .form-search .txt-keyword { 
        padding-left:6%;
        width:94%;
    }   
}   

/******************************************************************************/ 
@media screen and (max-device-width:  480px), screen and (max-width:  480px) {
    .spacer {
        padding-top: 70px;
    }
    .nav-category > li {

        width:100%; 
        display:block;
        margin: 0 auto;
     }    
    .nav-category > li > a {
        width:100%; 
        margin: 0 auto;
     }
    .form-search .txt-keyword { 
        padding-left:8%;
        width:92%;
    }   
    .top-project-info { max-height: 400px; }
    #bottominfo { background: rgba(0,0,0,.75); }
    h3 { font-size:18px; }
}   
</style>

    <div class="layout-2cols">

        <div class="grid_12" style="min-height:650px;">
            <div class="left-list-category" style="padding:30px 0 20px;">
                <h4 class="rs title-nav" style="font-weight:300; color:#777;">ALL PAGES (alphabetical)</h4>
                    
                <ul class="rs nav nav-category">
                    <?php
                    foreach ($pages as $page) {
                        if(strlen($page['name'] ) > 29) {
                            $short_title = substr($page['name'] ,0,30).'...';
                        }else{
                             $short_title = $page['name'];
                        }                     
                    ?>
                    <li>
                        <div style="display:inline-block; height:50px; width:50px; overflow:hidden; margin-right:10px;">
                            <img src="/<?= $page['image'] ?>" style="height:50px; width:auto; object-fit:cover;" align="left" 
                        onerror="this.src='/static/images/pages/thinapp_pages_banner.png'" />
                        </div> 
                        <div style="display:inline-block; width:auto; line-height:50px; overflow:hidden; max-height:50px;">
                            <a href="/<?= $page['slug'] ?>"><?= $short_title ?>  <i class="fa fa-angle-right"></i></a>
                        </div>
                    </li>
                    <?php
                    }
                    ?>
                </ul>
            </div><!--end: .left-list-category -->
        </div><!--end: .sidebar -->
        <div class="clear"></div>
    </div>
    
<?php include 'views/_footer.tpl.php'; ?>