{% extends 'aa_moonregistry/base.html' %}
{% load i18n %}
{% load humanize %}

{% block header_nav_brand %}
    {% translate "Moon Registry" %}
{% endblock %}

{% block details %}

{% csrf_token %} 
{% verbatim %}
<div class="row fBlack bgDark main-body">
    <div id="vue-app">       
        <moon-component :refresh_key="refresh_key"></moon-component>
        <div id="sentinel" ref="sentinel" style="height:1px"></div>
    </div>
</div>
{% endverbatim %}

{% endblock %}

{% block extra_css %}


    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" href="/static/aa_moonregistry/css/main.css?v={{ CM_VERSION }}">

{% endblock %}

{% block extra_javascript %}

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> 
    <script type="text/javascript" src="/static/aa_moonregistry/scripts/parse.js?v={{ CM_VERSION }}"></script> 
    

    {% autoescape off %}

    {% include 'aa_moonregistry/vue/autocomplete.html' %}
    {% include 'aa_moonregistry/vue/moonlist-component.html' %}
    {% include 'aa_moonregistry/vue/moonscan-component.html' %}

    {% endautoescape %}

    <script type="module">

        import { createApp } from '//unpkg.com/vue@3/dist/vue.esm-browser.js';
        import GenericPicker from '/static/aa_moonregistry/components/vue-autocomplete.js?v={{ CM_VERSION }}'
        import MoonRegistry from '/static/aa_moonregistry/components/MoonRegistry.js?v={{ CM_VERSION }}'
        import MoonScan from '/static/aa_moonregistry/components/MoonScan.js?v={{ CM_VERSION }}'

        var _vue = createApp({
            data: function () {
                return {
                    token: document.querySelector('[name=csrfmiddlewaretoken]').value,
                    header: 'X-CSRFToken',
                    refresh_key: 0
                }
            },
            mounted: function() {

                var $that = this;

                const scrollEl = document.querySelector('div.overflow-auto'); // get the DOM element
                var sentinel = this.$refs.sentinel;
                const observer = new IntersectionObserver(entries => {
                            if (entries.some(e => e.isIntersecting)) {
                                $that.refresh_key++;
                            }
                    }, {
                        root: scrollEl, 
                        rootMargin: '0px 0px 300px 0px', // start 300px before bottom
                        threshold: 0
                    }); // prefetch a bit early
                observer.observe(sentinel);  
            },
            methods: {
            }
        });

        _vue.config.compilerOptions.delimiters = ['[[', ']]'];

        _vue.component("generic-picker", GenericPicker);
        _vue.component("moon-component", MoonRegistry);
        _vue.component("moonscan-component", MoonScan);

        _vue.mount('#vue-app');


    </script>   


{% endblock %}

{% block extra_script %}

        document.addEventListener("DOMContentLoaded", function () {
            var theme = document.documentElement.getAttribute("data-theme");
            if (theme) {
                if (theme === "darkly") {
    
                    var style = document.createElement("style");
    
                    style.innerHTML = `
                        .registry-input > .fa-close {
                            color: #ddd;
                        }
                        .structure-yield-control label,
                        .structure-filter-and {
                            color: #fff;
                        }
                                               
                    `;
    
                    document.head.appendChild(style);
                }
            }
        });     

{% endblock %}