{% extends "layout.html" %}

{% from "macros/version_switch.html" import item_langs with context %}
{% from "macros/preview.html" import external_link %}

{% macro buttons(is_popup=False) %}
<div class="buttons form-controls init-block" data-block-name="compact-buttons" data-compact-name="form-controls">
  <a class="compact-toggle" title="Компактный вид" data-help-message="{{ stream.get_help(env, 'compact-toggle') }}></a>
  {% if not is_popup %}
    {% for action in actions %}
      {%- set action_url = action.url(env, item=item) -%}
      <a href="{{ action_url }}"
         rel="{{ action.mode }}"
         {%- if action.item_lock %} data-item-lock="true"{% endif %}
         {%- if action.accepts_item_form %} data-item-form="true"{% endif %}
         class="button action-{{ action.action }}{% if action.cls %} icon-{{ action.cls}}{% endif %}">
        {{- action.title -}}
      </a>
    {% endfor -%}

    <a href="{{ stream.url_for(env, 'item', item=item.id) }}"
       rel="get"
       {%- if item_lock %} data-item-lock="true"{% endif %}
       class="button action-edit icon-edit"
       data-help-message="{{ stream.get_help(env, 'cancel-preview', 'Action')}}">
      Править
    </a>
  {% endif %}
</div>
{% endmacro %}

{% block content %}
<form class="init-block item-form{% if is_popup %} popup-form{% endif %}"
      data-block-name="item-form">
  <input type="hidden" name="edit_session" value="{{ edit_session }}"/>
  <div class="content">
    <div class="header">
      <div style="float:left">
        <h1>
          <a href="{{ stream_url.qs_set(filter_form.get_data()) }}" style="text-decoration:none;">{{ stream_title }}</a> <br/>
          <a href="{{ stream.url_for(env, 'item', item=item.id) }}" style="font-size: 10px;">{{ item.title or item }}</a>
        </h1>
        <div class="flags">
          {{- item_langs(stream, item, url_name='preview') -}}
        </div>
        <ul class="preview-width init-block" data-block-name="preview-width">
          <li data-device="desktop" class="active"></li>
          <li data-device="mobile" data-width="500"></li>
          <li data-device="tablet" data-width="1000"></li>
          <li data-device="laptop" data-width="1200"></li>
          <li data-device="desktop" data-width=""></li>
        </ul>

        {{- external_link(external_url) -}}
      </div>

      {{ buttons(is_popup) }}
    </div>
  </div>

  {% if item_lock %}{{ item_lock.render() }}{% endif %}
</form>

<iframe src="{{ item_url }}" style="width: 100%; height: 100%; padding-top: 100px; box-sizing: border-box;">
</iframe>
<div data-body-class="no-margin"></div>

{% endblock %}
