{namespace yext.entitiesstorm.EntityManager.add}

/**
 * Add entity page
 * @param view AddEntityView
 */
{template .main}
  <div class="add-entity-page-layout">
    <div class="add-entity-header">
      <h1>
        {$view.pageHeader}
      </h1>
    </div>
    <div class="add-entity-content js-add-entity-content">
      <div class="block-error add-entity-error js-add-entity-error" style="display:none">
      </div>
      <form class="add-entity-form js-add-entity-form" method="POST">
        <div class="add-entity-configuration">
          <table class="rounded-table-noheader internal-table">
            <tr>
              <td>{msg desc=""}Country{/msg}</td>
              <td>
                <div class="js-country-select">
                  {call yext.storm.common.select.main2}
                    {param view: $view.availableCountries /}
                  {/call}
                </div>
              </td>
            </tr>
            <tr class="field-row {if not $view.folder.hasChildFolders} no-hover no-edit{/if}">
              <td>{msg desc=""}Folder Location{/msg}</td>
              <td>
                {$view.folder.renderFull}
              </td>
            </tr>
            {if length($view.templates) > 0}
              <tr class="js-select-template">
                <td>
                  {msg desc=""}Template{/msg}
                  <i class="info-icon"
                     data-basic-text="{msg desc=""}If you choose a template, entity information will be pre-populated with values from the selected template.{/msg}"></i>
                </td>
                <td>
                  <select name="templateId">
                    <option value="">({msg desc=""}None{/msg})</option>
                    {foreach $template in $view.templates}
                      <option value="{$template.id}"
                              {if $view.selectedTemplateId == $template.id}selected{/if}>
                        {$template.name}
                      </option>
                    {/foreach}
                  </select>
                  <input type="hidden"
                         name="selectedTemplateFields"
                         class="js-selected-template-fields">
                  {if $view.hasTemplateSelected}
                    <span class="template-selected-text">
                      {msg desc=""}Not all fields are shown below.{/msg}
                      <button type="button" class="select-fields js-select-template-fields">
                        {msg desc=""}Select which fields will be applied{/msg}
                      </button>
                    </span>
                    <div class="template-fields-list js-template-fields-list"
                         data-title="{msg desc=""}Copy Field content from: {$view.selectedTemplate.name}{/msg}"
                         style="display:none">
                      <div class="field-selection">
                        <p>
                          {msg desc=""}Select the fields whose content you would like to include.{/msg}
                        </p>
                        <button type="button" class="deselect-all-fields js-deselect-all-fields">
                          {msg desc=""}Deselect All Fields{/msg}
                        </button>
                        {if $view.templateFieldsSelector}
                          {$view.templateFieldsSelector.render}
                        {/if}
                      </div>
                      <div class="field-actions">
                        <button type="button"
                                class="cancel-fields-selection js-cancel-fields-selection">
                          {msg desc=""}Cancel{/msg}
                        </button>
                        <button type="button"
                                class="btn btn-action select-fields-button js-select-fields-button">
                          <span>{msg desc=""}Select Fields{/msg}</span>
                        </button>
                      </div>
                    </div>
                  {/if}
                </td>
              </tr>
            {/if}
          </table>
        </div>
        <div class="add-entity-fields">
          <table class="profile-table" cellspacing="0">
            <thead>
              <tr>
                <td colspan="2">
                  {msg desc=""}Core Information{/msg}
                </td>
              </tr>
            </thead>
            <tbody>
              {foreach $field in $view.coreFields}
                <tr class="field-row {$field.cssSelector}">
                  <td>
                    {$field.name}{if $field.required}<span class="required-circle"></span>{/if}
                    {if $view.fieldTooltips[$field.id]}
                      <a class="info-icon" data-basic-text="{$view.fieldTooltips[$field.id]}"></a>
                    {/if}
                  </td>
                  <td class="field-content">{$field.renderEdit}</td>
                </tr>
              {/foreach}
            </tbody>
          </table>
        </div>
        <div class="add-entity-form-controls">
          <button class="btn btn-action">
            <span>{msg desc=""}Continue{/msg}</span>
          </button>
          {if $view.referer}
            <a class="cancel" href="{$view.referer}">{msg desc=""}Cancel{/msg}</a>
          {/if}
        </div>
      </form>
    </div>
  <div>
  <script type="text/javascript">
    {literal}
      $(function() {
        new yext.entity.add.AddEntityPage();
      });
    {/literal}
  </script>
{/template}