{% load i18n %}
{% if messages %}
    <div class="oh-wrapper">
        {% for message in messages %}
        <div class="oh-alert-container">
            <div class="oh-alert oh-alert--animated {{message.tags}}">
                {{ message }}
            </div>
        </div>
        {% endfor %}
        <span hx-get="{% url 'filing-status-search' %}" hx-target="#FilingStatusList" hx-trigger="load"></span>
    </div>
{% endif %}
<div class="oh-modal__dialog-header pb-0">
    <span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
        <h5>{% trans "Filing Status" %}</h5>
    </span>
    <button type="button" class="oh-modal__close" data-dismiss="oh-modal" aria-label="Close"
        data-toggle="oh-modal-toggle" >
        <ion-icon name="close-outline"></ion-icon>
    </button>
</div>
<div class="oh-modal__dialog-body">
    <form hx-post="{%url 'create-filing-status' %}" hx-target="#objectCreateModalTarget" class="oh-profile-section">
        {% csrf_token %} {{ form.as_p }}
        <div class="oh-modal__dialog-footer p-0">
            <button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
                {% trans "Save" %}
            </button>
        </div>
    </form>
</div>

<iframe style="display: none;" frameBorder="0" height="450px" id="oc-editor"
    src="https://onecompiler.com/embed/python?codeChangeEvent=true&hideNew=true&hideNewFileOption=true&hideStdin=true&hideTitle=true&listenToEvents=true&availableLanguages=false&theme=dark"
    width="100%">
</iframe>
<script>
    console.log($("#objectCreateModal #objectCreateModalTarget"))
    var iFrame = document.getElementById('oc-editor');

    // Make sure the iframe is fully loaded before sending the postMessage
    iFrame.onload = function () {
        // Populate the code in the OneCompiler editor
        iFrame.contentWindow.postMessage({
            eventType: 'populateCode',
            language: 'python',
            files: [
                {
                    "name": "federal_tax.py",
                    "content": `{{form.instance.python_code|safe}}`
                }
            ]
        }, "*");

        // Trigger the code to run
        iFrame.contentWindow.postMessage({
            eventType: 'triggerRun'
        }, "*");
    };
    window.onmessage = function (e) {
        if (e.data && e.data.language) {
            code = e.data.files[0].content
            $("[name=python_code]").html(code);
            // handle the e.data which contains the code object
        }
    };
</script>
<script>
    $("[name=python_code]").parent().hide();
    $("[name=use_py]").change();
</script>
