<style>
    #pn-category-container {
        border: 1px solid #dadada;
        border-radius: 5px;
        padding: 16px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        width: 630px;
        background: #fbfbfb;
        transition: visibility 600ms, opacity 600ms;
        visibility: hidden;
        display: none;
    }


    #pn-category-container input {
        margin-left: 0;
    }


    #pn-category-container label {
        margin-right: 10px;
    }


    #pn-category-container p {
        margin: 0;
        line-height: 28px;
    }


    #pn-category-container .thank-you {
        font-weight: 700;
    }


    #pn-category-container .inline {
        display: inline-block;
    }


    #pn-category-container .close-btn {
        border: none;
        background-color: #37AAF3;
        padding: 6px 10px;
        color: #fff;
        border-radius: 3px;
    }


    #pn-category-container  .pn-mdl-header {
        padding-bottom: 10px;


    }
    #pn-category-container  .pn-mdl-footer {
        padding-top: 15px;
    }
</style>


<!-- Pushnews categories box (it will only be visible when a new Push Subscriber is detected) -->
<div id="pn-category-container">
    <div class="pn-mdl-header">
        <p class="thank-you">Obrigado por se cadastrar nas Push Notifications!</p>
    </div>
    <div class="pn-mdl-body">
        <div class="inlinea">
            <p>Quais os assuntos do seu interesse?</p>
        </div>
        <div class="inlinea">
            <input type="checkbox" name="pushnews-category" value="geral" id="pn-category-1">
            <label for="pn-category-1">Geral</label>


            <input type="checkbox" name="pushnews-category" value="esportes" id="pn-category-2">
            <label for="pn-category-2">Esportes</label>


            <input type="checkbox" name="pushnews-category" value="economia" id="pn-category-3">
            <label for="pn-category-3">Economia</label>


            <input type="checkbox" name="pushnews-category" value="politica" id="pn-category-4">
            <label for="pn-category-4">Política</label>
        </div>
    </div>
    <div class="pn-mdl-footer">
        <button class="close-btn">× Fechar</button>
    </div>
</div>
<script>
    var IlabsPush = IlabsPush || [];


    /**
     * When a new Push Subscription is detected, show the categories box
     */
    function pushnewsNewSubscriptionHandler(event) {
        if (true === event.data.isSubscribed) {
            var pushnewsId = event.data.pnId;


            document.getElementById("pn-category-container").style.visibility = "visible";
            document.getElementById("pn-category-container").style.display = "block";
        }
    }


    /**
     * When a category is clicked, sync with Pushnews
     */
    var pnCategories = document.querySelectorAll("input[name=pushnews-category]");
    if (null !== pnCategories) {
        pnCategories.forEach(function(pnCategory) {
            pnCategory.addEventListener("change", function(event) {
                var categoryName = this.getAttribute('value');
                var categoryValue = "0";
                if (true === this.checked) {
                    categoryValue = "1";
                }
                var customFilters = {};
                customFilters[categoryName] = categoryValue;

                IlabsPush.push(["sendCustomFilters", customFilters]);
            })
        });


    }


    /**
     * When the close button is clicked, close the categories box
     */
    document.querySelector("#pn-category-container .close-btn").addEventListener("click", function(event) {
        event.preventDefault();
        document.getElementById("pn-category-container").style.visibility = "hidden";
        document.getElementById("pn-category-container").style.display = "none";
    });
</script>