{% extends "authorized_base.html" %}
{% import "macros/fields.html" as fields %}


{% block subnav_header %}
  {% if form.obj %}
    {{ form.obj.name }}
  {% else %}
    New template
  {% endif %}
{% endblock %}

{% block subnav_items %}
{% endblock %}

{% block content %}
  <section>
    <div class="ui segment no-padding transparent">
      <div class="ui grid middle aligned">
        <div class="ui eight wide column">
          <div class="details-header-with-extra">
            <h3>
              Template details
            </h3>
          </div>
        </div>
        <div class="ui four wide column right aligned">
          <div class="header-label-with-icon">
            {% if form.obj and form.obj.versions %}
              <div class="ui top right pointing dropdown versions-menu-dropdown">
                <a class="title">Versions <i class="code branch icon"></i></a>
                <div class="menu">
                  {% for version in form.obj.versions|reverse %}
                    <a href="{{ url_for(".template_version", version_id=version.id) }}" class="item">{{ fields.local_date_value(version.created_at) }} by {{ version.created_by }}</a>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <form id="template-form" method="post" novalidate>
      <input type="hidden" id="source" name="source" value="{{ form.source.data|default("", True) }}">
      <input type="hidden" id="context" name="context" value="{{ form.context.data|default("", True) }}">

      <div class="ui segment details source-segment">
        <div class="ui grid">
          <div class="row">
            {{ fields.form_field(form.name) }}
            <div class="one wide column">
              <label class="editable">ID</label>
            </div>
            <div class="two wide column">
              <div class="value editable">{% if form.obj %}{{ form.obj.id }}{% else %}N/A{% endif %}</div>
            </div>
            <div class="one wide column">
              <label class="editable">{{ form.is_active.label }}</label>
            </div>
            <div class="two wide column">
              <div class="value yes-no">
                {{ form.is_active }}
                <label for="{{ form.is_active.name }}">
                  <span class="yes">Yes</span>
                  <span class="no">No</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui segment details source-segment">
        <div class="ui grid">
          <div class="row">
            {{ fields.form_field(form.subject, True) }}
            {% if "subject" not in form.errors %}
              <div id="subject-errors" class="field-errors"></div>
            {% endif %}
          </div>
          <div class="ui divider"></div>
          <div class="row">
            <div class="eight wide column">
              <div class="expandable-wrapper">
                <div class="expandable-header source">
                  <label>Source</label>
                  <div>
                    <i class="copy icon"></i>
                    <i class="clipboard icon"></i>
                  </div>
                  <div>
                    <a href="https://shopify.github.io/liquid/basics/introduction/" target="_blank" data-tooltip="Liquid templating language is being used for the rendering. Follow the link for the reference." data-inverted="" data-variation="mini" data-position="bottom center"><i class="question circle icon"></i></a>
                    <i class="expand arrows alternate icon"></i>
                    <i class="compress arrows alternate icon"></i>
                  </div>
                </div>
                <div id="source-editor"></div>
                <div id="source-errors" class="field-errors">
                  {% for error in form.source.errors %}
                    {{ error }}
                    {{ ", " if not loop.last else "" }}
                  {% endfor %}
                </div>
              </div>
            </div>
            <div class="four wide column">
              <div class="expandable-wrapper">
                <div class="expandable-header context">
                  <label>Test Context</label>
                  <div>
                    <i class="copy icon"></i>
                    <i class="clipboard icon"></i>
                  </div>
                  <div>
                    <i class="expand arrows alternate icon"></i>
                    <i class="compress arrows alternate icon"></i>
                  </div>
                </div>
                <div id="context-editor"></div>
                <div id="context-errors" class="field-errors">
                  {% for error in form.context.errors %}
                    {{ error }}
                    {{ ", " if not loop.last else "" }}
                  {% endfor %}
                </div>
              </div>
              <div id="images-list-panel">
                <label>Images</label>
                <a class="add-file"><i class="plus icon"></i></a>
              </div>
              <div id="images-list" class="ui divided items">
                {% for image in images %}
                <div class="item">
                  <div class="ui image image-wrapper">
                    <img src="{{ image.url }}"  data-fallbacksrc="{{ static_url_for('static', filename='img/no_image.png') }}" onerror="this.onerror=null; this.src=this.dataset.fallbacksrc" data-fallbackbase64="{{ url_for('images.base64_image', image_id=image.id) }}">
                  </div>
                  <div class="middle aligned content">
                    <div class="filename">{{ image.name }}</div><a class="insert-linked"><i class="ui icon linkify"></i></a><a class="insert-base64"><i class="ui icon paperclip"></i></a>
                  </div>
                </div>
                {% endfor %}
                <div class="item-template" style="display: none">
                  <div class="item">
                    <div class="ui image image-wrapper">
                      <img src=""  data-fallbacksrc="{{ static_url_for('static', filename='img/no_image.png') }}" onerror="this.onerror=null; this.src=this.dataset.fallbacksrc">
                    </div>
                    <div class="middle aligned content">
                      <div class="filename"></div><a class="insert-linked"><i class="ui icon linkify"></i></a><a class="insert-base64"><i class="ui icon paperclip"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="ui segment details preview-segment">
        <div class="ui grid">
          <div class="row">
            {{ fields.form_readonly_field(subject_preview, "Subject", "subject-preview") }}
          </div>
          <div class="ui divider"></div>
          <div class="row">
            <div class="twelve wide column">
              <div class="expandable-wrapper">
                <div class="expandable-header">
                  <label>Preview</label>
                  <div>
                    <span data-tooltip="Actual look may be worse than in preview due to email clients limitations. Better to use static, table-based layouts, width of 600px-800px, simple inline CSS and web safe fonts." data-inverted="" data-variation="mini" data-position="bottom center"><i class="exclamation triangle icon"></i></span>
                    <i class="expand arrows alternate icon"></i>
                    <i class="compress arrows alternate icon"></i>
                  </div>
                </div>
                <iframe id="preview" srcdoc="{{ preview }}"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui grid">
        <div class="two wide column">
          <a id="test-email-button" class="ui tiny button">Test Send</a>
        </div>
        <div class="ten wide column right aligned">
          <a class="ui tiny button" href="{{ url_for(".list_templates") }}">Cancel</a>
          <button class="ui pink tiny button" type="submit" name="action"  value="{{ form.Actions.SAVE.name }}">Save</button>
        </div>
      </div>

    </form>

    <form method="post" id="images-file-form" action="{{ url_for('images.upload_image') }}?is_ajax"  enctype="multipart/form-data">
      <input id="images-file-input" type="file" name="file" style="display: none" accept=".jpg, .jpe, .jpeg, .png, .gif, .svg, .bmp, .webp|image/*">
    </form>
  </section>

  <div class="bottom-messages-template" style="display: none">
      <div class="bottom-messages">
      <div class="ui message">
        <i class="close icon"></i>
        <div class="message-body">
          <div class="image"></div>
          <div class="text"></div>
        </div>
      </div>
    </div>
  </div>

  {% include("templating/components/test_email_modal.html") %}

{% endblock %}

{% block js %}
  {{  super() }}
  <script src="https://cdn.jsdelivr.net/npm/liquidjs@9.39.2/dist/liquid.browser.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/ace.min.js" integrity="sha512-19GpbkvqAWqGV89MzaDT7WpqKohnbOl8Kkpg5qRWpB+hlKk3leh45crhkhJAlhPup/VCgXGJLH48mu2Ewdvdcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/ext-searchbox.min.js" integrity="sha512-RjWHxvDlXm3I4xLhSj4MeIwRmHDaZr2p6rXhxTgaPEeoUmTtWmgL1c3pIp1iceLnsk95xF5DJw9LvFmwNY2i/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/mode-html.min.js" integrity="sha512-uMmxLS29LYgQIt2f6xjpFHZFA9GFQKO65aO+d/CNEra0lXPDnuMOxDqLJaBAYgmwd2KdNVXWMT5Y8B6Z5/DBng==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/worker-base.min.js" integrity="sha512-0h/mMADc2pfHpB0qInfzKbbFOb4bRJjcgIxizKMjZmfTTENqTAmMoEcUn/JlfoDPyfrA9HMPBsp4KZkUEeDRHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/worker-html.min.js" integrity="sha512-C/vN1E8tnBWPnnzOkC1bUvw6Vrl2ISujFOajE1QuX9ouKUSbvPVHR4JxlUNZGvXBldiUgMGsza9B64SXB1gHEw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/mode-json.min.js" integrity="sha512-YXUz04sMmhEPQR5FLg4/6MFWcrTzZRobwv6cEVWsX9bfos1lm/Z5hfVz4WB3Z3XyhcVjWWUOvudJ+CCxecDI7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/worker-json.min.js" integrity="sha512-rC0eN5w7amZ440Pxe6E+4PoKU/oMqfTjAcRdsiuDlFUzJoO/nLkuVQzRT+oWf58vbYA0a+oH+KzEaUj6w/gkHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="{{ static_url_for('static', filename='js/edit_template.js') }}"></script>
{% endblock %}