| 
<div class="container-fluid"><div class="sticky-top bg-white overflow-x-auto py-1 px-3 mx--3 mb-3 border-bottom">
 <ul class="nav nav-pills nav-pills-dark flex-nowrap">
 <li class="nav-item">
 <a href="<?= go_to(); ?>" class="nav-link rounded-pill active no-wrap --xhr">
 <i class="mdi mdi-cart"></i>
 <?= phrase('Market'); ?>
 </a>
 </li>
 <li class="nav-item">
 <a href="<?= go_to('themes'); ?>" class="nav-link rounded-pill no-wrap --xhr">
 <i class="mdi mdi-palette"></i>
 <?= phrase('Installed Theme'); ?>
 </a>
 </li>
 <li class="nav-item">
 <a href="<?= go_to('modules'); ?>" class="nav-link rounded-pill no-wrap --xhr">
 <i class="mdi mdi-puzzle"></i>
 <?= phrase('Installed Module'); ?>
 </a>
 </li>
 <li class="nav-item">
 <a href="<?= go_to('ftp'); ?>" class="nav-link rounded-pill no-wrap --xhr">
 <i class="mdi mdi-console-network"></i>
 <?= phrase('FTP Configuration'); ?>
 </a>
 </li>
 </ul>
 </div>
 <div class="row">
 <div class="col-md-4">
 <div class="row mb-3">
 <div class="col-6">
 <a href="<?= go_to(null, ['order' => 'popular']); ?>" class="btn btn-secondary d-block btn-sm --xhr">
 <?= phrase('Popular'); ?>
 </a>
 </div>
 <div class="col-6">
 <a href="<?= go_to(null, ['order' => 'latest']); ?>" class="btn btn-secondary d-block btn-sm --xhr">
 <?= phrase('Latest'); ?>
 </a>
 </div>
 </div>
 </div>
 <div class="col-md-6 offset-md-2">
 <form action="<?= go_to(null, ['per_page' => null]); ?>" method="POST" class="form-horizontal position-relative-form mb-3">
 <div class="input-group input-group-sm">
 <input type="text" name="q" class="form-control" placeholder="<?= phrase('Search Add-Ons'); ?>" value="<?= (service('request')->getGet('q') ? htmlspecialchars(service('request')->getGet('q')) : null); ?>" />
 <button type="submit" class="btn btn-primary">
 <i class="mdi mdi-magnify"></i>
 </button>
 </div>
 </form>
 </div>
 </div>
 <hr class="mx--3 mt-0" />
 <div class="row addon-listing">
 <!-- addon listing -->
 </div>
 </div>
 
 <script type="text/javascript">
 $(document).ready(function() {
 $.ajax({
 url: '<?= current_page(); ?>',
 method: 'POST',
 data: {
 source: 'market',
 order: '<?= (service('request')->getGet('order') ? service('request')->getGet('order') : null); ?>',
 keyword: '<?= (service('request')->getGet('q') ? htmlspecialchars(service('request')->getGet('q')) : null); ?>'
 },
 beforeSend: function() {
 $('.addon-listing').html(
 '<div class="col-lg-12">' +
 '<div class="spinner-border" role="status">' +
 '</div>' +
 '</div>'
 )
 },
 context: this
 })
 .done(function(response) {
 if (! response || Object.keys(response).length === 0) {
 $('.addon-listing').html(
 '<div class="col-lg-12">' +
 '<div class="alert alert-warning">' +
 '<i class="mdi mdi-information-outline"></i>' +
 '<?= phrase('No add-ons available for your current Aksara version'); ?>' +
 '</div>' +
 '</div>'
 );
 
 return;
 } else if (typeof response.error !== 'undefined') {
 $('.addon-listing').html(
 '<div class="col-lg-12">' +
 '<div class="alert alert-warning">' +
 '<i class="mdi mdi-information-outline"></i>' +
 response.error +
 '</div>' +
 '</div>'
 );
 
 return;
 }
 
 $('.addon-listing').html(''),
 
 $.each(response, function(key, val) {
 if (val.addon_type == 'theme') {
 $(
 '<div class="col-sm-6 col-md-4 col-lg-3">' +
 '<div class="card rounded-4 mb-3">' +
 '<div class="card-body p-3">' +
 '<div class="position-relative mb-3">' +
 (val.type == 'backend' ? '<span class="badge bg-warning float-end mt-3 me-3"><?= phrase('Backend Theme'); ?></span>' : '<span class="badge bg-success float-end mt-3 me-3"><?= phrase('Frontend Theme'); ?></span>') +
 '<img src="' + val.thumbnail + '" class="img-fluid rounded-4 border" alt="..." />' +
 '</div>' +
 '<div class="mb-3">' +
 '<b data-bs-toggle="tooltip" title="' + val.name + '">' +
 val.name +
 '</b>' +
 '</div>' +
 '<div class="row">' +
 '<div class="col-6">' +
 '<a href="' + val.install_url + '" class="btn btn-primary d-block btn-xs show-progress">' +
 '<i class="mdi mdi-plus"></i>' +
 '<?= phrase('Install'); ?>' +
 '</a>' +
 '</div>' +
 '<div class="col-6">' +
 '<a href="' + val.demo_url + '" class="btn btn-outline-primary d-block btn-xs" target="_blank">' +
 '<i class="mdi mdi-magnify"></i>' +
 '<?= phrase('Preview'); ?>' +
 '</a>' +
 '</div>' +
 '</div>' +
 '</div>' +
 '</div>' +
 '</div>'
 )
 .appendTo('.addon-listing')
 } else if (val.addon_type == 'module') {
 $(
 '<div class="col-sm-6 col-md-4 col-lg-3">' +
 '<div class="card rounded-4 mb-3">' +
 '<div class="card-body p-3">' +
 '<div class="position-relative mb-3">' +
 '<img src="' + val.thumbnail + '" class="img-fluid rounded-4 border" alt="..." />' +
 '</div>' +
 '<div class="mb-3">' +
 '<b data-bs-toggle="tooltip" title="' + val.name + '">' +
 val.name +
 '</b>' +
 '</div>' +
 '<div class="row">' +
 '<div class="col-6">' +
 '<a href="' + val.install_url + '" class="btn btn-primary d-block btn-xs show-progress">' +
 '<i class="mdi mdi-plus"></i>' +
 '<?= phrase('Install'); ?>' +
 '</a>' +
 '</div>' +
 '<div class="col-6">' +
 '<a href="' + val.demo_url + '" class="btn btn-outline-primary d-block btn-xs" target="_blank">' +
 '<i class="mdi mdi-magnify"></i>' +
 '<?= phrase('Preview'); ?>' +
 '</a>' +
 '</div>' +
 '</div>' +
 '</div>' +
 '</div>' +
 '</div>'
 )
 .appendTo('.addon-listing')
 }
 })
 })
 .fail(function() {
 })
 })
 </script>
 
 |