{% extends "/AdminTheme/base_admin.html" %}
{% block content %}
<!-- Main Container -->
<main id="main-container">

    <!-- Hero -->
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">Media</h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">Dashboard</li>
                        <li class="breadcrumb-item active" aria-current="page">Media</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">
        <!-- Dynamic Table Full -->
        <div class="block block-rounded">
            <div class="block-header block-header-default">
                <p>&nbsp;</p>
            </div>
            <div class="block-content block-content-full">
                <form action="/mlebet/media/upload" class="dropzone" id="media-upload">
                    <input type="file" name="file" />
                </form>
            </div>
            <div class="block-content block-content-full">
                <!-- Simple Gallery -->
                <div class="row items-push js-gallery">
                    {%for media in medias%}

                    <div class="col-md-6 col-lg-4 col-xl-3 animated fadeIn">
                        <div class="options-container fx-item-zoom-in fx-overlay-zoom-out">
                            <img class="img-fluid options-item" src="{{media.src}}" alt="{{media.alt}}">
                            <div class="options-overlay bg-black-75">
                                <div class="options-overlay-content">
                                    <h6 class="h6 text-white mb-1">{{media.name}}</h6>
                                    <h4 class="h6 text-white-75 mb-3">{{media.alt}}</h4>
                                    <a class="btn btn-sm btn-danger" onclick="deleteMedia({{media.id}}, '{{media.name}}');">
                                        <i class="fa fa-pencil-alt mr-1"></i> Delete
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {%endfor%}
                </div>
            </div>
        </div>
        <!-- END Dynamic Table Full -->
    </div>
    <!-- END Page Content -->
</main>
<!-- END Main Container -->
{% endblock %}
{% block script %}
<!--<script>jQuery(function () { Dashmix.helpers('magnific-popup'); });</script>-->
<script>
    function deleteMedia(id, fname) {
        
        var jqxhr = $.post("/mlebet/media/delete", {
                id: id,
                fname:fname
            })
            .done(function (data) {
                if (data == 'success') {
                    window.location.href = "/mlebet/media";
                } else {
                    alert("Save Failed!");
                }
            })
            .fail(function () {
                alert("Save Failed!");
            });
            
    }
</script>
{% endblock %}