<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>
