{{! template-lint-disable triple-curlies }}
{{#if editMode}}
  <form action={{imageUploadHref}} class="js-new_panel_form">
    {{#if (and isExtension isExtensionsEnabled)}}
      <div class="full-width align-center strong new-panel-extension_view">
        {{extension.extension.name}}
      </div>
      <div class="pd-y-4 align-center">
        {{! TODO: Remove this hardcode image }}
        <img class="square-6" src="https://static-cdn.jtvnw.net/jtv_user_pictures/allenhklee-profile_image-61985bcc25ac4ce6-300x300.png">
      </div>
      <div>
        {{#common/button-element class='full-width mg-b-2' onClick=(action 'extensionsLiveSettings')}}
          {{i18n 'Live Settings'}}
        {{/common/button-element}}
      </div>
      <div>
        {{#common/button-element isHollow=true class='full-width' onClick=(action 'extensionsConfig')}}
          {{i18n 'Extension Config'}}
        {{/common/button-element}}
      </div>
      <div class="pos-absolute bottom-0 left-0 pd-1">
        {{#common/button-element isText=true onClick=(action 'toggleDeleteOverlay')}}
          {{t 'general.forms.remove'}}
        {{/common/button-element}}
      </div>
    {{/if}}
    {{#if isTeespring}}
      <div class="full-width align-center strong new-panel-teespring_view">
        {{i18n 'Your T-Shirt Campaign will be displayed in this panel'}}
      </div>
      {{#common/button-element isDisabled=submitDisabled onClick=(action 'savePanel') class='teespring-submit-button'}}
        {{t 'general.forms.submit'}}
      {{/common/button-element}}
      {{#common/button-element isText=true onClick=(action 'toggleDeleteOverlay')}}
        {{t 'general.forms.remove'}}
      {{/common/button-element}}
    {{/if}}
    {{#if isDefault}}
      <label class="new-panel-form__label new-panel-default_view">
        {{i18n 'Panel Title:'}}
      </label>
      {{input value=content.data.title class='text'}}
      {{panel-image-upload content=content imageUploaded=(action 'imageUploaded')}}
      <label class="new-panel-form__label">
        {{i18n 'Image Links To:'}}
      </label>
      {{input value=content.data.link class='text'}}
      <label class="new-panel-form__label">
        {{i18n 'Description:'}}
      </label>
      <div class="helper">
        {{i18n 'Supports'}}
        <a href="http://help.twitch.tv/customer/portal/articles/839490-markdown-basics" target="_blank" rel="noopener noreferrer">
          {{i18n 'Markdown'}}
        </a>
        {{i18n '(No HTML)'}}
      </div>
      {{textarea value=content.data.description}}
      {{#common/button-element isDisabled=submitDisabled onClick=(action 'savePanel')}}
        {{t 'general.forms.submit'}}
      {{/common/button-element}}
      {{#common/button-element isText=true onClick=(action 'toggleDeleteOverlay')}}
        {{t 'general.forms.remove'}}
      {{/common/button-element}}
      <img src={{spinnerImage}} class="{{unless isSaving 'hidden'}} js-upload_spinner">
    {{/if}}
    <div class="{{unless selectKind 'hidden'}} full-width pd-t-1">
      <button {{action 'setKind' 'default'}} class='button button--icon button--hollow full-width pd-y-1 mg-b-1'>
        {{svg-icon path='svg/grid-layout'}}
        <span>{{i18n 'Add a Text or Image Panel'}}</span>
      </button>
      {{#if teespringCampaignEnabled}}
        <button {{action 'setKind' 'teespring'}} class="button button--icon button--hollow full-width pd-y-1 mg-b-1">
          {{svg-icon path='svg/shirt'}}
          <span>{{i18n 'Create a Teespring Panel'}}</span>
        </button>
      {{/if}}
      {{#if isExtensionsEnabled}}
        <div class="brick brick--pd-none brick--theme-white">
          <div class="clearfix border-b pd-1">
            <h4 class="float-left mg-l-1">{{i18n 'Extensions'}}</h4>
            <div class="float-right">
              {{#link-to 'settings.extensions.index' class='button button--hollow qa-extension-more-extensions'}}
                {{i18n 'More Extensions'}}
              {{/link-to}}
            </div>
          </div>
          <div class="scroll-y pos-relative panel-edit__ext-list">
            {{#if isAnyExtensionInstalled}}
              <ul class="pd-x-2 pd-y-2 qa-extensions-installed-list">
                {{#each installedExtensions as |installedExtension|}}
                  <li class="flex flex--verticalCenter pd-b-2">
                    <div class="flex__item flex__item--noGrow mg-r-1">
                      {{! This hardcoded image will be replaced with a dynamic one from the backend manifest }}
                      <img class="square-3 mg-b-0" src="https://static-cdn.jtvnw.net/jtv_user_pictures/allenhklee-profile_image-61985bcc25ac4ce6-300x300.png">
                    </div>
                    <div class="flex__item flex__item--grow mg-r-1 align-left">
                      {{#common/button-element isText=true onClick=(action 'extensionsSelect' installedExtension.extension.id) class='extensions-name'}}
                        {{installedExtension.extension.name}}
                      {{/common/button-element}}
                    </div>
                    <div class="flex__item flex__item--noGrow">
                      {{#common/button-element iconOnly=true}}
                        {{svg-icon path='svg/gear'}}
                      {{/common/button-element}}
                    </div>
                  </li>
                {{/each}}
              </ul>
            {{else}}
              <div class="qa-extensions-none-installed">
                {{i18n 'No extensions installed'}}
              </div>
            {{/if}}
          </div>
        </div>
      {{/if}}
    </div>
    <div class="{{unless showConfirmDelete 'hidden'}} confirm-delete darken">
      <p>{{i18n 'Are you sure you want to delete this panel?'}}</p>
      {{#common/button-element onClick=(action 'destroyPanel' this)}}
        {{t 'general.forms.delete'}}
      {{/common/button-element}}
      {{#common/button-element isText=true onClick=(action 'toggleDeleteOverlay')}}
        {{t 'general.forms.cancel'}}
      {{/common/button-element}}
    </div>
  </form>
{{else}}
  <div class="js-panel-content">
    {{#if isDefault}}
      {{#if content.data.title}}
        <div class="part">
          <h3 class="title">{{content.data.title}}</h3>
        </div>
      {{/if}}
      {{#if content.data.image}}
        <div class="part">
          {{#if content.data.link}}
            <a href={{safeHref}} class="link" target="_blank"  rel="noopener noreferrer">
              <img src={{content.data.image}}>
            </a>
          {{/if}}
          {{#unless content.data.link}}
            <img src={{content.data.image}}>
          {{/unless}}
        </div>
      {{/if}}
      {{#if content.data.description}}
        <div class="part description">
          {{{content.html_description}}}
        </div>
      {{/if}}
    {{/if}}
    {{#if isTeespring}}
      <div class="teespring-panel">
        <div class="teespring-panel-header">
          <img src="/images/xarth/store/merch-panel-header.png">
        </div>
        <div class="teespring-panel-title">
          {{content.data.name}}
        </div>
        <div class="teespring-panel-image">
          <a {{action 'trackPanelClick' this}} class="link">
            <img src={{content.data.image_front}}>
          </a>
        </div>
        <div class="teespring-panel-info">
          {{countdown-timer endDate=content.data.end_date}}
          <div class="teespring-panel-buy">
            {{#common/button-element onClick=(action 'trackPanelClick')}}
              {{i18n 'Buy it now'}}
            {{/common/button-element}}
          </div>
        </div>
        <div class="teespring-panel-reservations">
          {{content.data.reservations}} {{i18n 'reserved towards goal of'}} {{content.data.tipping_point}}
        </div>
        <div class="teespring-panel-progress">
          {{progress-bar current=content.data.reservations total=content.data.tipping_point}}
        </div>
      </div>
    {{/if}}
    {{#if (and isExtensionsEnabled isExtension)}}
      {{extension-panel
        extensionInstallation=extension
        refreshPanelLayout=refreshPanelLayout
      }}
    {{/if}}
  </div>
{{/if}}
