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


{% block subnav_header %}
  Template version: {{ version.template.name }},	  {{ fields.local_date_value(version.created_at) }}  by  {{ version.created_by }}
{% 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>
              Diff with current template state
            </h3>
          </div>
        </div>
        <div class="ui four wide column right aligned">
          <div class="header-label-with-icon">
            <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 v in version.template.versions|reverse %}
                  <a href="{{ url_for(".template_version", version_id=v.id) }}" class="item {% if v == version %}active{% endif %}">{{ fields.local_date_value(v.created_at) }} by {{ v.created_by }}</a>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

      <div class="ui segment details source-segment">
        <div class="ui grid">
          <div class="row">
            {{ fields.form_readonly_field(version.name, "Name (version)") }}
            {{ fields.form_readonly_field(version.template.name, "Name (current)") }}
          </div>
          <div class="row">
            {{ fields.form_readonly_field(version.subject, "Subject (version)") }}
            {{ fields.form_readonly_field(version.template.subject, "Subject (current)") }}
          </div>
          <div id="subject-errors" class="field-errors"></div>
        </div>
      </div>

      <div class="ui segment details source-segment">
        <div class="ui grid">
          <div class="row">
            <div class="twelve wide column">
              <div class="expandable-wrapper">
                <div class="expandable-header source">
                  <label class="aligned-header-item left">Source (version >> current)</label>
                  <div  class="aligned-header-item middle">
                    <i class="copy icon"></i>
                  </div>
                  <div class="aligned-header-item right">
                    <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">
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="twelve wide column">
              <div class="expandable-wrapper">
                <div class="expandable-header context">
                  <label class="aligned-header-item left">Test Context (version >> current)</label>
                  <div class="aligned-header-item  middle">
                    <i class="copy icon"></i>
                  </div>
                  <div class="aligned-header-item right">
                    <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">
                </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 (version)</label>
                  <i class="expand arrows alternate icon"></i>
                  <i class="compress arrows alternate icon"></i>
                </div>
                <iframe id="preview" srcdoc="{{ preview }}"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui grid">
        <div class="twelve wide column right aligned">
          <a class="ui tiny button"
             href="{{ url_for(".update_template", template_id=version.template_id) }}">Back</a>
        </div>
      </div>

    </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>

{% 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="https://cdn.jsdelivr.net/npm/ace-diff@3.0.3/dist/ace-diff.min.js"></script>
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ace-diff@3.0.3/dist/ace-diff.min.css">
  <script
    src="{{ static_url_for('static', filename='js/template_version.js') }}"></script>
{% endblock %}