<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      lang="en"
      metal:use-macro="here/main_template/macros/master"
      xml:lang="en"
      tal:define="
        app nocall:view/app;
        news_app_view nocall:app/view;
        publisher nocall:app/@@publisher;
        upload_target_url here/aq_parent/absolute_url;
        proto nocall:here/@@proto;
        edit_button nocall:here/@@edit-button;
        userprofiles nocall:view/userprofiles;
      "
      i18n:domain="ploneintranet"
>

  <metal:content fill-slot="content">
    <div class="sidebar-normal application-body application-news sidebar-left-open sidebar-right-closed focus-sidebar"
         id="application-body"
    >
      <div class="document-body pat-scroll-box"
           id="document-body"
           tal:define="
             read_only python: not view.can_edit;
             proto context/@@proto;
           "
      >
        <form class="document pat-inject pat-validation pat-form panel-style"
              id="news-edit-form"
              action="${context/absolute_url}/edit.html"
              enctype="multipart/form-data"
              method="post"
              data-pat-inject="#sidebar-content; &amp;&amp; #global-statusmessage; loading-class: ''; &amp;&amp; #workflow-menu; loading-class: ''; &amp;&amp; #hero-upload; loading-class: ''"
        >
          <div class="canvas-toolbar metadata sticky"
               id="metadata-toolbar"
          >
            <div class="canvas-toolbar-section editor">

              <tal:texteditor_toolbar condition="not:read_only"
                                      replace="structure context/@@texteditor-toolbar/text"
              />
            </div>


            <div class="canvas-toolbar-section quick-functions">
              <div class="functions">
                <a class="icon more pat-tooltip tooltip-inactive"
                   aria-expanded="false"
                   href="${here/absolute_url}/@@more-menu#more-menu-news"
                   data-pat-tooltip="source: ajax; position-list: tr"
                   i18n:translate=""
                >
                  Options
                </a>
                <a class="pat-tooltip icon-language icon"
                   href="${here/absolute_url}/@@language-menu#language-menu"
                   data-pat-tooltip="source: ajax"
                   tal:condition="proto/is_multilingual_enabled"
                   i18n:domain="plone"
                   i18n:translate=""
                >
                  Language
                </a>
                <tal:workflow condition="python: not view.is_baseline()"
                              replace="structure here/@@workflow_menu|nothing"
                />
                <tal:saving_badge condition="python: not view.is_baseline()"
                                  replace="structure here/@@saving_badge|nothing"
                />
                <tal:edit replace="structure edit_button" />

                <a class="icon-down-open meta-data-toggle icon pat-toggle collapsible-closed"
                   title="Show extra metadata fields"
                   data-pat-toggle="selector: #news-edit-form; value: more-metadata less-metadata"
                >
                  Toggle extra metadata
                </a>
              </div>
            </div>
            <fieldset class="pat-collapsible closed meta-extra"
                      id="meta-extra"
                      data-pat-collapsible="trigger: .meta-data-toggle"
            >
              <div class="panel-content">
                <fieldset class="horizontal">
                  <label class="tags">
                    <tal:i18n i18n:translate="">Tags</tal:i18n>
                    <input class="pat-autosuggest"
                           name="subjects"
                           placeholder="Tags"
                           type="text"
                           value="${python:','.join(context.subject)}"
                           data-pat-autosuggest="ajax-data-type: json; ajax-search-index: text; ajax-url:${context/absolute_url}/@@getVocabulary?resultsonly=1&amp;name=ploneintranet.network.vocabularies.Keywords&amp;field=subjects"
                           tal:attributes="
                             disabled read_only;
                           "
                           i18n:attributes="placeholder"
                    />
                  </label>
                  <label tal:define="
                           target_sections publisher/get_target_sections;
                           parent nocall:here/aq_parent;
                         "
                         tal:condition="python:len(target_sections) &gt; 1 and parent in target_sections"
                  >
                    <tal:i18n i18n:translate="">Section</tal:i18n>
                    <select disabled="${python:'disabled' if read_only else None}"
                            name="section"
                    >
                      <option selected="${python: 'selected' if parent == section else None}"
                              value="${section/UID}"
                              tal:repeat="section target_sections"
                      >${section/title}</option>
                    </select>
                  </label>

                  <label>
                    <tal:i18n i18n:translate="label_news_author">Author</tal:i18n>
                    <input class="pat-autosuggest"
                           disabled="${python: 'disabled' if read_only else None}"
                           name="creators"
                           placeholder="Select a user"
                           required
                           type="text"
                           data-pat-autosuggest="ajax-data-type: json; maximum-selection-size: 1; allow-new-words: false; ajax-url: ${here/absolute_url}/@@allusers.json; prefill-json: ${python:view.member_prefill(context, attrs['name'])};"
                           i18n:attributes="placeholder"
                    />
                  </label>

                  <fieldset class="group pat-checklist">
                    <legend i18n:translate="">Image</legend>
                    <label>
                      <input name="article_image"
                             type="checkbox"
                             value="selected"
                             tal:attributes="
                               checked python:getattr(context, 'article_image', 0);
                               disabled read_only;
                             "
                      />
                      <input name="article_image-empty-marker"
                             type="hidden"
                             value="1"
                      />
                      <tal:i18n i18n:translate="label_article_image">Image visible as hero image on the news article page.</tal:i18n>
                    </label>
                    <label>
                      <input name="magazine_image"
                             type="checkbox"
                             value="selected"
                             tal:attributes="
                               checked python:getattr(context, 'magazine_image', 0);
                               disabled read_only;
                             "
                      />
                      <input name="magazine_image-empty-marker"
                             type="hidden"
                             value="1"
                      />
                      <tal:i18n i18n:translate="label_magazine_image">Image visible on news overview pages.</tal:i18n>
                    </label>
                  </fieldset>

                  <fieldset class="group">
                    <legend i18n:translate="label_hero_image_aspect_ratio">Hero image aspect ratio</legend>
                    <select name="hero_image_aspect_ratio">
                      <option selected="${option/selected}"
                              value="${option/value}"
                              tal:repeat="option view/hero_image_aspect_ratio_options"
                      >${option/title}</option>
                    </select>
                    <input name="hero_image_aspect_ratio-empty-marker"
                           type="hidden"
                           value="1"
                    />
                  </fieldset>

                  <fieldset class="group pat-checklist">
                    <legend i18n:translate="">Visibility</legend>
                    <label>
                      <input name="pinned"
                             type="checkbox"
                             value="selected"
                             tal:attributes="
                               checked view/pinned|nothing;
                               disabled read_only;
                             "
                      />
                      <input name="pinned-empty-marker"
                             type="hidden"
                             value="1"
                      />
                      <tal:i18n i18n:translate="">Pin this item to the top of the news stream</tal:i18n>
                    </label>
                    <tal:disabled condition="nothing">
                      <label tal:condition="view/can_manage_splashpages">
                        <input checked="${python:view.is_splash_page and 'checked' or None}"
                               name="is_splash_page"
                               type="checkbox"
                               value="selected"
                        />
                        <input name="is_splash_page-empty-marker"
                               type="hidden"
                               value="1"
                        />
                        <tal:i18n i18n:translate="">Add to splash page</tal:i18n>
                      </label>
                    </tal:disabled>
                    <label>
                      <input name="magazine_home"
                             type="checkbox"
                             value="selected"
                             tal:attributes="
                               checked view/magazine_home|nothing;
                               disabled read_only;
                             "
                      />
                      <input name="magazine_home-empty-marker"
                             type="hidden"
                             value="1"
                      />
                      <tal:i18n i18n:translate="label_magazine_home">Visible on news landing page</tal:i18n>
                    </label>
                    <label>
                      <input name="must_read"
                             type="checkbox"
                             value="selected"
                             tal:attributes="
                               checked python:getattr(context, 'must_read', 0);
                               disabled read_only;
                             "
                      />
                      <input name="must_read-empty-marker"
                             type="hidden"
                             value="1"
                      />
                      <tal:i18n i18n:translate="label_must_read">All users must read this</tal:i18n>
                    </label>
                  </fieldset>

                  <fieldset class="group">
                    <legend i18n:translate="">Promote as a portal banner</legend>
                    <select disabled="${python: 'disabled' if read_only else None}"
                            name="banner"
                    >
                      <option selected="${option/selected}"
                              value="${option/value}"
                              tal:repeat="option view/banner_options"
                      >${option/title}</option>
                    </select>
                    <fieldset class="pat-depends icon-set"
                              data-pat-depends="condition: banner=${view/banner_with_icon_identifier}; transition: slide"
                    >
                      <fieldset class="icon-selector pat-checklist free-form"
                                tal:define="
                                  banner_icon here/banner_icon|string:lightbulb;
                                "
                      >
                        <label class="icon-${item/value}"
                               tal:repeat="item view/banner_icons"
                        >
                          <input checked="${python: banner_icon==item.value and 'checked' or None}"
                                 name="banner_icon"
                                 type="radio"
                                 value="${item/value}"
                          />
                        ${item/value}
                        </label>
                      </fieldset>
                    </fieldset>
                  </fieldset>

                  <!-- commenting not implemented yet -->
                  <fieldset class="group pat-checklist"
                            tal:condition="nothing"
                  >
                    <legend i18n:translate="">Comments</legend>
                    <label>
                      <input name="allow_comments"
                             type="checkbox"
                             value="selected"
                             tal:attributes="
                               checked python:getattr(context, 'allow_comments', 0);
                               disabled read_only;
                             "
                      />
                      <input name="allow_comments-empty-marker"
                             type="hidden"
                             value="1"
                      />
                      <tal:i18n i18n:translate="label_allow_comments">Allow comments</tal:i18n>
                    </label>
                  </fieldset>



                  <fieldset class="group">
                    <legend i18n:translate="label_publication_date">Publication Date</legend>
                    <div class="field-cluster layout-date-time">
                      <label>
                        <tal:i18n i18n:translate="">Date</tal:i18n>
                        <input class="pat-date-picker"
                               id="publication-date"
                               name="effective"
                               type="date"
                               data-pat-date-picker="${proto/date_picker_options}"
                               data-pat-validation="not-after: #expiration-date; message-date: ${proto/validation_start_after_end_error_message}"
                               tal:attributes="
                                 value view/effective_date;
                                 disabled read_only;
                               "
                        />
                      </label>
                      <label>
                        <tal:i18n i18n:translate="">Time</tal:i18n>
                        <input id="publication-date-time"
                               name="effective"
                               type="time"
                               tal:attributes="
                                 value view/effective_time;
                                 disabled read_only;
                               "
                        />
                      </label>
                    </div>
                  </fieldset>

                  <fieldset class="group">
                    <legend i18n:translate="label_expiration_date">Expiration date</legend>
                    <div class="field-cluster layout-date-time">
                      <label>
                        Date
                        <input class="pat-date-picker"
                               id="expiration-date"
                               name="expires"
                               placeholder="Select a date"
                               type="date"
                               data-pat-date-picker="${proto/date_picker_options}"
                               data-pat-validation="not-before: #publication-date; message-date: ${proto/validation_end_before_start_error_message}"
                               tal:attributes="
                                 value view/expiry_date;
                                 disabled read_only;
                               "
                        />
                      </label>
                      <label>
                        Time
                        <input id="expiration-date-time"
                               name="expires"
                               type="time"
                               tal:attributes="
                                 value view/expiry_time;
                                 disabled read_only;
                               "
                        />
                      </label>
                    </div>
                  </fieldset>
                </fieldset>
              </div>
            </fieldset>
          </div>
          <div class="document-content ${view/type_class}-edit"
               id="document-content-news"
          >

            <div id="document-alert-bar"
                 tal:condition="python: view.is_baseline() and edit_button.can_view_working_copy()"
            >
              <p class="pat-message info"
                 i18n:translate=""
              >
                This item is being edited by
                <strong i18n:name="username">
                  ${python: userprofiles.get_fullname_for(edit_button.properties.get('checkout_user'))}
                </strong>
                in a
                <a class="pat-inject"
                   href="${edit_button/working_copy/absolute_url}/@@edit.html"
                   data-pat-inject="#document-body"
                   i18n:translate=""
                >
                  working copy
                </a>
                created
                <tal:i18n tal:define="
                            checkout_time python: edit_button.properties.get('checkout_time');
                          "
                          i18n:name="date"
                >
                  <time class="datestamp pat-display-time"
                        datetime="${checkout_time/ISO}"
                        data-pat-display-time="from-now: true; locale: ${context/plone_portal_state/language}"
                  ></time>
                </tal:i18n>.
              </p>
            </div>

            <div id="document-alert-bar"
                 tal:condition="view/is_working_copy"
            >
              <p class="pat-message info"
                 i18n:translate=""
              >
                This is a working copy created by
                <strong i18n:name="username">
                  ${python: userprofiles.get_fullname_for(edit_button.properties.get('checkout_user'))}
                </strong>
                for
                <a class="pat-inject"
                   href="${baseline/absolute_url}/@@edit.html#document-body"
                   data-pat-inject="#document-body"
                   tal:define="
                     baseline nocall: edit_button/baseline;
                   "
                >
                  ${baseline/Title}
                </a>
                created
                <tal:i18n tal:define="
                            checkout_time python: edit_button.properties.get('checkout_time');
                          "
                          i18n:name="date"
                >
                  <time class="datestamp pat-display-time"
                        datetime="${checkout_time/ISO}"
                        data-pat-display-time="from-now: true; locale: ${context/plone_portal_state/language}"
                  ></time>
                </tal:i18n>.
              </p>
            </div>

            <div class="pat-rich">
              <hgroup id="title-block">
                <h1 id="document-title">${context/title}</h1>
                <textarea class="doc-title pat-content-mirror"
                          name="title"
                          placeholder="Title of news item"
                          type="text"
                          value=""
                          data-pat-content-mirror="target: #document-title"
                          tal:condition="not:read_only"
                >${context/title|nothing}</textarea>
              </hgroup>
            </div>
            <div class="summary-hero form-panel pat-collapsible open"
                 id="news-edit-summary-hero-${here/UID}"
                 data-pat-collapsible="store: local; scroll-selector: self; scroll-offset: 100px"
            >
              <h2 class="form-separation-header"
                  i18n:translate="label_hero_image_and_summary"
              >Hero image and summary</h2>
              <fieldset class="row">
                <label class="four columns image-uploader pat-subform pat-autosubmit pat-inject"
                       id="hero-upload"
                       title="Upload a new hero image that may be displayed in the news overview pages."
                       data-pat-inject="url: ${context/absolute_url}/@@edit.html; source: #hero-upload; target: #hero-upload"
                       tal:define="
                         has_image context/image;
                       "
                >
                  <img alt=""
                       src="${context/absolute_url}/@@images/image/preview?timestamp=${modified/ISO|nothing}"
                       tal:define="
                         modified here/modified|nothing;
                       "
                       tal:condition="has_image"
                  />
                  <span class="pat-button upload-button"
                        style="z-index: 1"
                        tal:condition="has_image"
                        i18n:translate="label_replace_image"
                  >Replace image</span>
                  <span class="pat-button upload-button"
                        tal:condition="not: has_image"
                        i18n:translate="label_upload_image"
                  >Upload image</span>
                  <input accept="image/*"
                         disabled="${python: 'disabled' if read_only else None}"
                         name="image"
                         type="file"
                  />
                  <input name="dx_modified"
                         type="hidden"
                         value="${here/@@workflow_menu/dx_modified}"
                  />
                  <tal:token tal:replace="structure context/@@authenticator/authenticator" />
                </label>
                <label class="eight columns">
                  <textarea maxlength="400"
                            name="description"
                            placeholder="Summary (Will be automatically filled upon save if no summary is provided)"
                            rows="4"
                            title="Description"
                            tal:attributes="
                              disabled read_only;
                            "
                            i18n:attributes="placeholder"
                  >${context/description}</textarea>
                </label>
              </fieldset>
            </div>
            <fieldset class="image-gallery form-panel pat-collapsible closed"
                      id="image-gallery-fieldset"
                      data-pat-collapsible="store: local; scroll-selector: self; scroll-offset: 100px"
                      tal:condition="view/show_image_gallery"
            >
              <h2 class="form-separation-header"
                  i18n:translate="label_image_gallery"
              >
                Image gallery
              </h2>
              <div class="panel-content"
                   id="news-edit-image-gallery-panel-content"
              >

                <p class="pat-message info"
                   tal:condition="not: context/carousel_slides"
                   i18n:translate="message_select_image_for_gallery"
                >
                  Add an image gallery to the news article by uploading a set of images or by selecting them from Image bank.
                </p>

                <tal:has_slides condition="here/carousel_slides">

                  <fieldset class="vertical">
                    <label>
                      <tal:i18n i18n:translate="label_show_as_ellipsis">
                        Show as&hellip;
                      </tal:i18n>
                      <select id="news-gallery-style"
                              name="carousel_show_as"
                      >
                        <option selected="${python: 'selected' if option.value == context.carousel_show_as else None}"
                                value="${option/token}"
                                tal:repeat="option view/carousel_show_as_options"
                                i18n:translate=""
                        >${option/title}</option>
                      </select>
                    </label>
                    <label class="pat-depends"
                           data-pat-depends="news-gallery-style=carousel; transition: slide"
                    >
                      <tal:i18n i18n:translate="label_height">Height</tal:i18n>
                      <select name="carousel_height">
                        <option selected="${python: 'selected' if option.value == context.carousel_height else None}"
                                value="${option/token}"
                                tal:repeat="option view/carousel_height_options"
                                i18n:translate=""
                        >${option/title}</option>
                      </select>
                    </label>
                    <label>
                      <tal:i18n i18n:translate="label_position">Position</tal:i18n>
                      <select name="carousel_position">
                        <option selected="${python: 'selected' if option.value == context.carousel_position else None}"
                                value="${option/token}"
                                tal:repeat="option view/carousel_position_options"
                                i18n:translate=""
                        >${option/title}</option>
                      </select>
                    </label>
                    <input class="sortable-amount"
                           name="pat-sortable-amount"
                           type="hidden"
                           value="1"
                    />
                  </fieldset>

                  <fieldset class="images group pat-inject">
                    <ul class="pat-sortable sortable-items-list images"
                        data-pat-sortable="selector: .gallery-item"
                    >

                      <li class="sortable-item gallery-item pat-subform pat-autosubmit pat-inject"
                          data-pat-inject="source: #global-statusmessage; target: #global-statusmessage; url: ${carousel_slide/absolute_url}/@@edit-slide-description"
                          tal:repeat="carousel_slide view/carousel_slides"
                      >
                        <img tal:define="
                               images carousel_slide/@@images;
                             "
                             tal:replace="structure python:images.tag(scale='1col', css_class='thumbnail')"
                        />
                        <textarea maxlength="400"
                                  name="carousel_slide_caption"
                                  placeholder="Write a caption for this image. (Optional)"
                                  type="text"
                                  i18n:attributes="placeholder message_write_caption_for_image"
                        >${carousel_slide/Description}</textarea>
                        <span class="additional-icons pat-inject pat-subform pat-autosubmit"
                              data-pat-inject="source: #news-edit-image-gallery-panel-content; target: #news-edit-image-gallery-panel-content; url: ${context/absolute_url}/@@remove-slide-image"
                        >
                          <button class="button button-remove"
                                  type="submit"
                          ></button>
                          <input name="carousel_slides"
                                 type="hidden"
                                 value="${carousel_slide/UID}"
                          />
                          <tal:token tal:replace="structure context/@@authenticator/authenticator" />
                        </span>
                      </li>

                    </ul>
                  </fieldset>

                </tal:has_slides>
                <div class="button-bar">
                  <label class="pat-button file-upload-button pat-inject pat-subform pat-autosubmit"
                         data-pat-inject="source: #news-edit-image-gallery-panel-content; target: #news-edit-image-gallery-panel-content; url: ${context/absolute_url}/@@upload-slide-images"
                  >
                    <input accept="image/*"
                           multiple
                           name="new_carousel_slides:list"
                           type="file"
                    />
                    <tal:i18n i18n:translate="label_upload_from_device">
                      Upload from device
                    </tal:i18n>
                  </label>
                  <a class="pat-button pat-modal"
                     href="${here/absolute_url}/@@panel-select-image-image-bank#document-content"
                     data-pat-modal="class: large panel image-picker application-news"
                     i18n:translate="label_select_from_image_bank"
                  >
                    Select from Image bank
                  </a>
                  <a class="pat-button pat-modal"
                     href="${here/absolute_url}/@@panel-select-image-pixxio#document-content"
                     data-pat-modal="class: large panel image-picker application-news"
                     tal:condition="python:context.portal_registry['ploneintranet.news.pixxio_application_key']"
                     i18n:translate="label_select_from_pixxio"
                  >
                    Select from Pixx.io
                  </a>
                </div>
              </div>
            </fieldset>
            <div class="ProseMirror"
                 tal:omit-tag="not: read_only"
            >
              <article class="document rich pat-rich">
                <tal:texteditor condition="not:read_only"
                                replace="structure context/@@texteditor/text"
                />
                <tal:text condition="python:read_only and context.text and hasattr(context.text, 'raw')"
                          replace="structure context/text/output"
                />
              </article>
            </div>
          </div>
        </form>
      </div>

      <tal:sidebar replace="structure context/@@sidebar.tile" />

    </div>

  </metal:content>

</html>
