{% extends "misago/admin/generic/form.html" %}
{% load i18n static misago_admin_form %}


{% block title %}
{% if target.pk %}
  {{ target }}
{% else %}
  {% trans "New CSS" %}
{% endif %} | {{ theme }} | {{ active_link.name }} | {{ block.super }}
{% endblock title %}


{% block extra-head %}
<style>
  #css-editor {
    height: calc(100vh - 410px);
    min-height: 220px;
  }
</style>
{% endblock extra-head %}


{% block page-header %}
{{ block.super }}
<small>
  {{ theme }}
</small>
{% if target.pk %}
  <small>
    {{ target }}
  </small>
{% endif %}
{% endblock page-header %}


{% block form-header %}
{% if target.pk %}
  {% trans "Edit CSS" %}
{% else %}
  {% trans "New CSS" %}
{% endif %}
{% endblock %}


{% block form-body %}
{% form_row form.name %}

<input type="hidden" id="{{ form.source.id_for_label }}" name="{{ form.source.html_name }}" value="{{ form.source.value|default:'' }}">
<div id="css-editor">{{ form.source.value|default:"" }}</div>
{% endblock form-body %}


{% block form-main-col-class %}{% endblock form-main-col-class %}


{% block form-footer %}
<button class="btn btn-primary btn-sm" name="stay" value="1">{% trans "Save and keep editing" %}</button>
{% if target and target.pk %}
  <button class="btn btn-primary btn-sm">{% trans "Save changes" %}</button>
{% else %}
  <button class="btn btn-primary btn-sm">{% trans "Save" %}</button>
{% endif %}
{% endblock %}


{% block form-footer-cancel %}
<a href="{% url 'misago:admin:themes:assets' pk=theme.pk %}" class="btn btn-light btn-sm">
  {% trans "Cancel" %}
</a>
{% endblock %}


{% block javascripts %}
<script src="{% static 'misago/admin/ace-editor/ace.js' %}" type="text/javascript" charset="utf-8"></script>
<script>
  var editor = ace.edit("css-editor");
  editor.setTheme("ace/theme/textmate");
  editor.setShowPrintMargin(false);
  editor.session.setMode("ace/mode/css");
  editor.session.setOptions({ tabSize: 2, useSoftTabs: true });
  var input = document.getElementById("{{ form.source.id_for_label }}");
  editor.on('change', function(event){
    input.value = editor.getValue();
  });
</script>
{% endblock javascripts %}