{% extends "base.html" %}
{% block title %} Ignore categories {% endblock %}
{% load static %}
{% block extra_js %}
<script type='text/javascript'>pageView();</script>
<link rel="stylesheet" type="text/css" href="{% static 'css/vendor/select2.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/vendor/select2-bootstrap.min.css' %}">
<script src="{% static 'js/vendor/select2.min.js' %}"></script>
<script>
$(document).ready(function() {
    $("#category-selection").select2({
        theme:"bootstrap",
        width: '100%',
        placeholder: "Select categories to hide when viewing lots",
    });
    $('#category-selection').on('select2:unselect', function (e) {
        // delete
        var data = e.params.data;
        $.ajax({url: "/api/userignorecategory/delete/" + data.id, success: function(result){}});
    });
    // Fetch the preselected item, and add to the control
    var categorySelection = $('#category-selection');
    $.ajax({
        type: 'GET',
        url: '/api/userignorecategory/'
    }).then(function (data) {
        data = data.results;
        for (var i in data) {
            var option = new Option(data[i].text, data[i].id, data[i].selected, data[i].selected);
            categorySelection.append(option).trigger('change');
            categorySelection.trigger({
                type: 'select2:select',
                params: {
                    data: data[i]
                }
            });
        }
        $('#category-selection').on('select2:select', function (e) {
            // create
            var data = e.params.data;
            $.ajax({url: "/api/userignorecategory/create/" + data.id, success: function(result){ }});
        });
    });
});

</script>
{% endblock %}
{% block content %}
{% include "preferences_ribbon.html" %}
            <br>You can hide categories that you're not interested in.  Lots in these categories will not be shown unless you specifically filter by that category.<br><br>
            For example, if you don't have a saltwater tank, you might want to hide corals.  Or, if you can't read, you might hide books/magazines.
            <br><br><br>
            Everything listed here is hidden from most views:
            <select id='category-selection' class="category-selection" name="categories" multiple="multiple"></select>
            <br><span class='text-muted'>Note that if you filter lots by a category, you'll still be able to see lots in that category.</span>
{% endblock %}