// Copyright 2018 The Nomulus Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

{namespace registry.soy.registrar.admin}

/** Registrar admin settings page for view and edit. */
{template .settings}
  {@param allowedTlds: list<string>}
  {@param type: string} // the registrar type, e.g. REAL, OTE, TEST, etc.
  {@param environment: string} // the server environment e.g. PRODUCTION, SANDBOX
  <form name="item" class="{css('item')} {css('registrar')}">
    <h1>Administrator settings</h1>
    <table>
      <tr class="{css('kd-settings-pane-section')}">
        <td>
          <label class="{css('setting-label')}">Allowed TLDs</label>
          <span class="{css('description')}">set or remove TLDs this
            client is allowed access to.</span>
        <td class="{css('setting')}">
          <div class="{css('info')} {css('summary')}">
            <div id="tlds">
              {for $tld in $allowedTlds}
                {call .tld}
                  {param name: 'allowedTlds[' + index($tld) + ']' /}
                  {param tld: $tld /}
                {/call}
              {/for}
            </div>
            <div class="{css('hidden')}">
              <input id="newTld" value="" placeholder="Enter TLD"/>
              <button id="btn-add-tld" type="button"
                      class="{css('kd-button')} {css('btn-add')}">Add</button>
            </div>
          </div>
      {if $environment != 'PRODUCTION'}
        <tr class="{css('kd-settings-pane-section')}">
          <td>
            <label class="{css('setting-label')}">OT&amp;E setup page</label>
          <td class="{css('setting')}">
            <p>Generate new OT&amp;E accounts <a href="/registrar-ote-setup">here</a>
            </p></td>
        </tr>
      {/if}
      {if $type == 'OTE'}
        {call .oteStatus}
          {param registrarType: $type /}
        {/call}
      {/if}
      <tr class="{css('kd-settings-pane-section')}">
        <td>
          <label class="{css('setting-label')}">Create new registrar</label>
        <td class="{css('setting')}">
          <p><a href="/registrar-create">New registrar form</a>
          </p></td>
      </tr>
    </table>
  </form>
{/template}


/** TLD form input. */
{template .tld}
  {@param name: string}
  {@param tld: string}
  <div class="{css('tld')}">
    <button type="button" class="{css('kd-button')} {css('btn-remove')} {css('hidden')}">
      <i class="{css('icon-remove')} {css('edit')}">x</i>
    </button>
    <input name="{$name}" value="{$tld}" readonly>
  </div>
{/template}

{template .oteStatus}
  {@param registrarType: string}
  <tr class="{css('kd-settings-pane-section')}">
    <td class="{css('setting')}">
      <button
          type="button"
          id="btn-ote-status"
          value="Check OT&amp;E status"
          class="{css('kd-button')} {css('kd-button-submit')}
          {if $registrarType != 'OTE'} {css('disabled')} {/if}">
        Check OT&amp;E status
      </button>
    </td>
    <td id="ote-status-area-parent" class="{css('setting')}"></td>
  </tr>
{/template}

{template .oteResultsTable}
  {@param completed: bool}
  {@param detailsList: list<[description: string, timesPerformed: int, requirement: int, completed: bool]>}
  <table id="ote-results-table">
    {if $completed}
      <tr class={css('ote-fulfilled')}>
        <td>Status:</td>
        <td>Completed</td>
      </tr>
    {else}
      <tr class={css('ote-unfulfilled')}>
        <td>Status:</td>
        <td>Not Completed</td>
      </tr>
    {/if}
    <tr class="{css('ote-results-header')}">
      <th class="{css('ote-results-header-cell')}"><b>Test Name</b></th>
      <th class="{css('ote-results-header-cell')}"><b>Actions Performed</b></th>
    </tr>
    {for $detail in $detailsList}
      {if $detail.completed}
        <tr class="{css('ote-fulfilled')}">
          <td>{$detail.description}</td>
          <td>Completed</td>
        </tr>
      {elseif $detail.timesPerformed > 0}
        <tr class="{css('ote-semifulfilled')}">
          <td>{$detail.description}</td>
          <td>{$detail.timesPerformed} of {$detail.requirement}</td>
        </tr>
      {else}
        <tr class="{css('ote-unfulfilled')}">
          <td>{$detail.description}</td>
          <td>Not started</td>
        </tr>
      {/if}
    {/for}
  </table>
{/template}

{template .oteErrorArea}
  {@param message: string}
  <p id="ote-status-area">Error: {$message}</p>
{/template}