<form id="form-language" method="post" data-oc-toggle="ajax" data-oc-load="{{ action }}" data-oc-target="#language">
  <div class="table-responsive">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <td class="text-center" style="width: 1px;"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', $(this).prop('checked'));" class="form-check-input"/></td>
          <td>ID</td>
          <td class="text-start"><a href="{{ sort_name }}"{% if sort == 'name' %} class="{{ order|lower }}"{% endif %}>{{ column_name }}</a></td>
          <td class="text-start"><a href="{{ sort_code }}"{% if sort == 'code' %} class="{{ order|lower }}"{% endif %}>{{ column_code }}</a></td>
          <td class="text-end"><a href="{{ sort_sort_order }}"{% if sort == 'sort_order' %} class="{{ order|lower }}"{% endif %}>{{ column_sort_order }}</a></td>
          <td class="text-end">{{ column_action }}</td>
        </tr>
      </thead>
      <tbody>
        {% if languages %}
          {% for language in languages %}
            <tr>
              <td class="text-center"><input type="checkbox" name="selected[]" value="{{ language.language_id }}" class="form-check-input"/></td>
              <td class="text-start language-id">{{ language.language_id }}</td>
              <td class="text-start">{{ language.name }}
                <br/>
                {% if language.installed %}
                  {% if language.status %}
                    <small class="text-success">{{ text_enabled }}</small>
                  {% else %}
                    <small class="text-danger">{{ text_disabled }}</small>
                  {% endif %}
                {% else %}
                {% endif %}
              </td>
              <td class="text-start">{{ language.code }}</td>
              <td class="text-end">{{ language.sort_order }}</td>
              <td class="text-end btns-wrap">
                <a href="{{ language.edit }}" data-bs-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary"><i class="fa-solid fa-pencil"></i></a>
                {% if not language.installed %}
                  <button type="button" data-code="{{ language.code }}" data-bs-toggle="tooltip" title="{{ button_install }}" class="language-change btn btn-success"><i class="fa-solid fa-plus-circle"></i></button>
                {% else %}
                  <button type="button" data-code="{{ language.code }}" data-bs-toggle="tooltip" title="{{ button_uninstall }}" class="language-change btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td class="text-center" colspan="5">{{ text_no_results }}</td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
  <div class="row">
    <div class="col-sm-6 text-start">{{ pagination }}</div>
    <div class="col-sm-6 text-end">{{ results }}</div>
  </div>
</form>

<script>
$(document).on('click', '.language-change', function (e) {
  const isInstall = $(this).hasClass('btn-success');

  var element = this;
  var id = $(this).parent().siblings('.language-id').text();
  var code = $(this).data('code');
  var install_url = 'index.php?route=localisation/language.install&user_token={{ user_token }}&language=' + code;
  var uninstall = 'index.php?route=localisation/language.delete&user_token={{ user_token }}';

  $.ajax({
    url: isInstall ? install_url : uninstall,
    dataType: 'json',
    type: 'post',
    data: 'selected[]=' + (isInstall ? code : id),
    beforeSend: function () {
      $(element).button('loading');
    },
    complete: function () {
      $(element).button('reset');
    },
    success: function (json) {
      $('.alert-dismissible').remove();

      if (json['error']) {
        $('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
      }

      if (json['success']) {
        $('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');

        $(element).parent().siblings('.language-id').text(json['language_id'] || 0);
        setTimeout(() => {
          $(element)
          .removeClass(isInstall ? 'btn-success' : 'btn-danger').addClass(isInstall ? 'btn-danger' : 'btn-success')
          .find('i').removeClass(isInstall ? 'fa-plus-circle' : 'fa-minus-circle').addClass(isInstall ? 'fa-minus-circle' : 'fa-plus-circle');
        }, 0);
      }
    },
    error: function (xhr, ajaxOptions, thrownError) {
      console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
  });
})
</script>