{% macro FilesTab() %}
    <div class="row">
        <h5>Images</h5>
        <form id="add-images-form">
            <div class="input-field col s12 mt-4">
                <select name="folder">
                    <option value="icons">Icons</option>
                    <option value="backgrounds">Backgrounds</option>
                </select>
                <label>Folder</label>
            </div>
            <input name="files" id="add-images-input" class="hide">
        </form>
        <div class="col s12">
            {{ tcdrop(allowed_types='apng,bmp,gif,ico,cur,jpg,jpeg,jfif,pjpeg,pjp,png,svg,tif,tiff,webp', id="images-tcdrop", max_files="30") }}
            {{ button(text="save", icon="save", id="save-images-btn", float="left", data={"url": url_for('settings_system.add_images')}) }}
        </div>
    </div>

    <div class="row">
        <div id="files-div">{{ files_html|safe }}</div>
    </div>
{% endmacro %}

{% macro Files(icons, backgrounds) %}
    <style>
        .file-title {
            position: relative;
            top: .6em;
        }
    </style>

    <div class="divider"></div>
    <div class="row">
        <div class="col s12">
            <ul class="collection with-header">
                <li class="collection-header theme-primary theme-on-primary-text">Backgrounds</li>
                {% if backgrounds %}
                    {% for background in backgrounds %}
                        <li class="collection-item pt-2 pb-2 avatar">
                            <div class="row">
                                <div class="col s12 mt-2">
                                    <a href="static/images/backgrounds/{{ background }}" target="_blank">
                                        <img src="static/images/backgrounds/{{ background }}" alt="" class="circle">
                                    </a>
                                    <span class="selectable-all copy-target file-title"  style="word-wrap: break-word;">static/images/backgrounds/{{ background }}</span>
                                </div>

                                <div class="col s12 mt-2">
                                    <span class="theme-secondary-text right">
                                        <i class="material-icons-outlined icon-btn copy-btn">filter_none</i>
                                        <i class="material-icons-outlined icon-btn delete-file-btn"
                                           data-url="{{ url_for('settings_system.delete_file') }}"
                                           data-folder="backgrounds"
                                           data-file="{{ background }}">close
                                        </i>
                                    </span>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                {% else %}
                    <li class="collection-item">No files yet</li>
                {% endif %}
            </ul>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="col s12">
            <ul class="collection with-header">
                <li class="collection-header theme-primary theme-on-primary-text">Icons</li>
                {% if icons %}
                    {% for icon in icons %}
                        <li class="collection-item pt-2 pb-2 avatar">
                            <div class="row">
                                <div class="col s12 mt-2">
                                    <a href="static/images/icons/{{ icon }}" target="_blank">
                                        <img src="static/images/icons/{{ icon }}" alt="" class="circle">
                                    </a>
                                    <span class="selectable-all copy-target file-title" style="word-wrap: break-word;">static/images/icons/{{ icon }}</span>
                                </div>

                                <div class="col s12 mt-2">
                                    <span class="theme-secondary-text right">
                                        <i class="material-icons-outlined icon-btn copy-btn">filter_none</i>
                                        <i class="material-icons-outlined icon-btn delete-file-btn"
                                           data-url="{{ url_for('settings_system.delete_file') }}"
                                           data-folder="icons"
                                           data-file="{{ icon }}">close
                                        </i>
                                    </span>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                {% else %}
                    <li class="collection-item">No files yet</li>
                {% endif %}
            </ul>
        </div>
    </div>

    <script>
        $( document ).ready(function() {
            init_copy_btn(".collection-item");
            $(".delete-file-btn").on('click', function(e) {
                $.ajax({
                    url: $(this).attr('data-url'),
                    type: 'GET',
                    data: {folder: $(this).attr("data-folder"), file: $(this).attr("data-file")},
                    success: function(data){
                        $("#files-div").empty();
                        $("#files-div").append(data);
                    }
                });
            });
        });
    </script>
{% endmacro %}

{{ Files(icons, backgrounds) }}