{% load i18n horillafilters %}
{% if messages %}
<div class="oh-alert-container">
  {% for message in messages %}
  <div class="oh-alert oh-alert--animated {{message.tags}}">{{ message }}</div>
  {% endfor %}
</div>
{% endif %}
{% if not filing_status.use_py %}
<div class="oh-sticky-table__table">
  <div class="oh-sticky-table__thead">
    <div class="oh-sticky-table__tr">
      <div class="oh-sticky-table__th">{% trans "Tax Rate" %}</div>
      <div class="oh-sticky-table__th">{% trans "Min. Income" %}</div>
      <div class="oh-sticky-table__th">{% trans "Max. Income" %}</div>

      {% if perms.payroll.change_taxbracket %}
      <div class="oh-sticky-table__th"></div>
      {% endif %}
      {% if perms.payroll.delete_taxbracket %}
      <div class="oh-sticky-table__th"></div>
      {% endif %}
    </div>
  </div>
  <div class="oh-sticky-table__tbody">
    {% for tax_bracket in tax_brackets %}
    <div class="oh-sticky-table__tr" draggable="true">
      <div class="oh-sticky-table__td">
        {{ tax_bracket.tax_rate|stringformat:".2f" }}%
      </div>
      <div class="oh-sticky-table__td">
        {{ tax_bracket.min_income|stringformat:".2f"|currency_symbol_position }}
      </div>
      <div class="oh-sticky-table__td">
        {{ tax_bracket.get_display_max_income|stringformat:".2f"|currency_symbol_position }}
      </div>
      {% if perms.payroll.change_taxbracket %}
      <div class="oh-sticky-table__td">
        <div class="oh-btn-group">
          <a
            class="oh-btn oh-btn--light-bkg w-100"
            data-toggle="oh-modal-toggle"
            data-target="#objectUpdateModal"
            hx-get="{% url 'tax-bracket-update' tax_bracket_id=tax_bracket.id %}"
            hx-target="#objectUpdateModalTarget"
            title="{% trans 'Update' %}"
          >
            <ion-icon
              name="create-outline"
              role="img"
              class="md hydrated"
              aria-label="create outline"
            ></ion-icon>
          </a>
        </div>
      </div>
      {% endif %}
      {% if perms.payroll.delete_taxbracket %}
      <div class="oh-sticky-table__td">
        <div class="oh-btn-group">
          <button
            class="oh-btn oh-btn--danger-outline w-100"
            title="{% trans 'Delete' %}"
            hx-confirm="{% trans 'Are you sure to delete this Tax bracket ?' %}"
            hx-post="{% url 'tax-bracket-delete' tax_bracket_id=tax_bracket.id%}"
            hx-target="#taxbracketList{{tax_bracket.filing_status_id.id}}"
          >
            <ion-icon
              name="trash-outline"
              role="img"
              class="md hydrated"
              aria-label="trash outline"
            ></ion-icon>
          </button>
        </div>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>
{% else %}
<iframe
   frameBorder="0"
   height="450px"
   id="oc-editor{{filing_status.pk}}"
   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>
    var iFrame = document.getElementById('oc-editor{{filing_status.pk}}');

    // 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": `{{filing_status.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
              $.ajax({
                type: "post",
                url: "{% url 'update-py-code' filing_status.pk %}",
                data: {
                  csrfmiddlewaretoken: getCookie("csrftoken"),
                  code:code,
                },
                success: function (response) {

                }
              });

              // handle the e.data which contains the code object
          }
      };

</script>{% endif %}
