        <p></p>
        <div class="ui container">
        
            <div class="ui inverted segment">
              <div class="ui inverted segment">
                <h1 class="ui header">
                  <i class="settings icon"></i>
                  {{{title}}}
                </h1>
                <a href="https://wpsmartcontracts.com/docs/doc-settings.php" target="_blank" class="ui grey button right floated">{{{learn-more}}}</a>
                <p>{{{subtitle}}}</p>
              </div>
            </div>

            <form method="post" action="options.php">

            <input type='hidden' name='option_page' value='{{{option-group}}}' />
            <input type="hidden" name="action" value="update" />
            {{{wp-nonce-field}}}

            <div class="ui secondary segment">
              <h2 class="ui dividing header">
                Global Settings
              </h2>

                <h3 class="ui dividing header">
                  Skin
                  <div class="sub header">
                    Select the User Interface (Skin) you want for your Coin, Crowdfunding, ICO and NFT views.
                  </div>
                </h3>
  
                <input type="hidden" id="wpsc_skin_hidden" name="etherscan_api_key_option[wpsc-skin]" value="{{wpsc-skin}}">
                
                <div class="ui stackable four column grid">
                  <div class="column">
                     <div class="ui raised segment">
                      <div class="wpsc-video-container">
                        <iframe width="560" height="315" src="//www.youtube.com/embed/P91N0zHFB-8?version=3&loop=1&playlist=P91N0zHFB-8&rel=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                      </div>
                        <h3 class="ui centered header">
                           <div class="ui fitted toggle checkbox">
                              <input tabindex="0" type="radio" name="wpsc_skin_radio" id="wpsc-default" class="wpsc-radio-ico" value="default" {{#wpsc_skin_0}}checked="checked"{{/wpsc_skin_0}}>
                              <label></label>
                           </div>
                           <br>
                           Default Skin
                        </h3>
                     </div>
                  </div>
                  <div class="column">
                     <div class="ui raised segment">
                        <div class="wpsc-video-container">
                          <iframe width="280" height="177" src="//www.youtube.com/embed/XQ4T38YUYlo?version=3&loop=1&playlist=XQ4T38YUYlo&rel=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                        </div>
                        <h3 class="ui centered header">
                           <div class="ui fitted toggle checkbox">
                              <input tabindex="0" type="radio" name="wpsc_skin_radio" id="wpsc-light1" class="wpsc-radio-ico" value="light1" {{#wpsc_skin_1}}checked="checked"{{/wpsc_skin_1}}>
                              <label></label>
                           </div>
                           <br>Light 1
                        </h3>
                     </div>
                  </div>
                  <div class="column">
                     <div class="ui raised segment">
                        <div class="wpsc-video-container">
                          <iframe width="280" height="177" src="//www.youtube.com/embed/xiA3yjXAObs?version=3&loop=1&playlist=xiA3yjXAObs&rel=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                        </div>
                        <h3 class="ui centered header">
                           <div class="ui fitted toggle checkbox">
                              <input tabindex="0" type="radio" name="wpsc_skin_radio" id="wpsc-light2" class="wpsc-radio-ico" value="light2" {{#wpsc_skin_2}}checked="checked"{{/wpsc_skin_2}}>
                              <label></label>
                           </div>
                           <br>
                           Light 2
                        </h3>
                     </div>
                  </div>
                  <div class="column">
                     <div class="ui raised segment">
                        <div class="wpsc-video-container">
                          <iframe width="280" height="177" src="//www.youtube.com/embed/LkUfrOdatjA?version=3&loop=1&playlist=LkUfrOdatjA&rel=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                        </div> 
                        <h3 class="ui centered header">
                           <div class="ui fitted toggle checkbox">
                              <input tabindex="0" type="radio" name="wpsc_skin_radio" id="wpsc-dark" class="wpsc-radio-ico" value="dark" {{#wpsc_skin_3}}checked="checked"{{/wpsc_skin_3}}>
                              <label></label>
                           </div>
                           <br>
                           Dark
                        </h3>
                     </div>
                  </div>
                </div>

                <p><a class="ui button" href="https://wpsmartcontracts.com/docs/doc-settings-skins.php" target="_blank">Click here to view a demo of all skins</a></p>

                <p>&nbsp;</p>

                <div class="ui stackable two column grid">
                  <div class="column">
                    <h3 class="ui dividing header">
                      {{{clear-cache}}}
                      <div class="sub header">
                        {{{cache-dur-in-secs}}}
                        <span class="ui icon" data-tooltip="{{{cache-dur-in-secs-tooltip}}}">
                          <i class="small help icon circular"></i>
                        </span>
                      </div>
                    </h3>
                    <select id="etherscan_api_key_option_expiration_time" name="etherscan_api_key_option[expiration_time]" class="ui dropdown labeled icon">
                      <i class="clock icon"></i>
                      <option value="">{{{choose-expiration-time}}}</option>
                      {{#expiration-time-list}}
                        <option value="{{value}}" {{selected}}>{{label}}</option>
                      {{/expiration-time-list}}
                    </select>
                    <p id="wpsc-clear-transient">
                      <a href="javascript:void(0);" id="wpscFlushTransients">
                        {{{flush-now}}}
                      </a>
                    </p>
                  </div>
                </div>

                <p class="submit">
                  <input type="submit" name="submit" id="submit" class="button button-primary" value="{{{save}}}">
                </p>

            </div>

            <div class="ui bottom attached warning message">
              <i class="icon help"></i>
              Need help? <a href="https://wpsmartcontracts.com/docs/doc-settings.php" target="_blank">read the documentation</a>.
            </div>

            <div class="ui secondary segment">
              <h2 class="ui dividing header">
                {{{crowd-settings}}}
              </h2>
              <div class="ui stackable two column grid">
                <div class="column">
                  <h4 class="ui header">
                    {{{infura-api-key-token}}}
                    <div class="sub header">
                      {{{free-registration}}} <a href="https://infura.io" target="_blank">{{{infura-api-key-text}}}</a>
                      <span class="ui icon" data-tooltip="{{{infura-api-key-tooltip}}}">
                        <i class="small help icon circular"></i>
                      </span>
                      <p>{{{infura-api-key-warning}}}</p>
                    </div>
                  </h4>
                  <div class="ui fluid icon input">
                    <input type="text" name="etherscan_api_key_option[infura_api_key]" value="{{infura-api-key-value}}">
                    <i class="key icon"></i>
                  </div>
                  <input id="infura-mnemonic-value" type="hidden" name="etherscan_api_key_option[infura_mnemonic]" value="{{infura-mnemonic}}">
                </div>

                <div class="column">
                  <div class="ui info message">
                    <div class="header">
                      Do you need an Infura API key?
                    </div>
                    <p>You need an Infura API key if you are running one or more of the following contracts:</p>
                    <ul class="list">
                      <li>Safe Crowdfundings</li>
                      <li>NFT Smart Contracts</li>
                    </ul>
                    <div class="ui divider"></div>
                    <div class="header">
                      Why do you need an Infura API key?
                    </div>
                    <p>The Infura API key is helpful to show the data of the NFT Marketplace and/or the Crowfunding raised funds to users not connected to a Metamask wallet. Like for example NFT owners, price, or Crowdfunding balance.</p>
                  </div>

                </div>
              </div>

              <p class="submit">
                <input type="submit" name="submit" id="submit" class="button button-primary" value="{{{save}}}">
              </p>

            </div>

            <div class="ui bottom attached warning message">
              <i class="icon help"></i>
              Need help? <a href="https://wpsmartcontracts.com/docs/doc-settings.php" target="_blank">read the documentation</a>.
            </div>

            <div class="ui secondary segment">
              <h2 class="ui dividing header">
                NFT Settings
              </h2>

              <div class="ui stackable two column grid">

                <div class="column">
                  <h4 class="ui header">
                    IPFS Storage
                    <div class="sub header">
                      Register to get a <a href="https://nft.storage/" target="_blank">free storage for IPFS</a>
                      <span class="ui icon" data-tooltip="Free decentralized storage and bandwidth for NFTs provided by nft.storage">
                        <i class="small help icon circular"></i>
                      </span>
                    </div>
                  </h4>
                  <div class="ui fluid icon input">
                    <input type="text" name="etherscan_api_key_option[nft_storage_key]" value="{{nft-storage-key}}">
                    <i class="key icon"></i>
                  </div>
                </div>
                  
                <div class="column">
                  <div class="ui info message">
                    <div class="header">
                      Do you need a NFT Storage API key?
                    </div>
                    <p>You need a NFT Storage API key only if:</p>
                    <ul class="list">
                      <li>You are using a NFT Smart Contract</li>
                      <li>And you want to store the media files in the InterPlanetary File System (IPFS)</li>
                    </ul>
                    <div class="ui divider"></div>
                    <div class="header">
                      Why do you need an NFT Storage API key?
                    </div>
                    <p>If you are planning to store your media files in a decentralized way using IPFS, then you need this API Key, otherwise you can just ignore this setting.</p>
                  </div>
                </div>

                <div class="column">
                  <h4 class="ui header">
                    Moralis Web3 API Key
                    <div class="sub header">
                      Register to get a <a href="https://admin.moralis.io/register" target="_blank">Moralis account</a>
                      <span class="ui icon" data-tooltip="You need a Moralis Web3 API Key.">
                        <i class="small help icon circular"></i>
                      </span>
                    </div>
                  </h4>
                  <div class="ui fluid icon input">
                    <input type="text" name="etherscan_api_key_option[nft_moralis_key]" value="{{nft-moralis-key}}">
                    <i class="key icon"></i>
                  </div>
                </div>
                  
                <div class="column">

                  <div class="ui info message">
                    <div class="header">
                      Do you need a Moralis API key?
                    </div>
                    <p>You need a Moralis API key only if:</p>
                    <ul class="list">
                      <li>You are using a ERC-1155 NFT Smart Contract</li>
                    </ul>
                    <div class="ui divider"></div>
                    <div class="header">
                      Why do you need a Moralis API key?
                    </div>
                    <p>You only need to use a Moralis API key if you are using an ERC-1155 Smart Contract (like Yuzu or Ikazumi). If you are using ERC-721 Smart Contracts (like Matcha, Mochi or Suika) you don't need a Moralis account.</p>
                    <p>This is because some functionalities multiple ownership of one item in the ERC-1155 and other complex functions that are not handled by the smart contracts are easy to manage using the Moralis developers tools.</p>
                  </div>

                  <div class="ui warning message">
                    <p>Moralis offer a lot of different services, please make sure you select a WEB3 API KEY.</p>
                    <p>Be aware that Moralis API is free until some number of request beyond this number you will need a <a href="https://moralis.io/pricing/" target="_blank">Moralis paid plan</a></p>
                    <p>This service is provided as a convenient and easy way to facilitate interactions with ERC-1155 Smart Contracts; this do not constitute an endorsement or approval by WP Smart Contracts. Please do your own research and use or not at your own discretion and risk.</p>
                  </div>

                </div>

                <div class="column">
                  <h4 class="ui header">
                    NFT Items per page
                  </h4>
                  <div class="ui fluid icon input">
                    <input type="text" placeholder="12" name="etherscan_api_key_option[nft_items_per_page]" value="{{nft-items-per-page}}">
                    <i class="list alternate outline icon"></i>
                  </div>
                </div>

              </div>

              <p class="submit">
                <input type="submit" name="submit" id="submit" class="button button-primary" value="{{{save}}}">
              </p>

            </div>

            <div class="ui bottom attached warning message">
              <i class="icon help"></i>
              Need help? <a href="https://wpsmartcontracts.com/docs/doc-settings.php" target="_blank">read the documentation</a>.
            </div>

            <div class="ui secondary segment">
              <h2 class="ui dividing header">
                {{{coin-settings}}}
              </h2>
              <div class="ui stackable two column grid">
                <div class="column">
                  <h4 class="ui header">
                    {{{api-key-token}}}
                    <div class="sub header">
                      {{{free-registration}}} <a href="https://etherscan.io/apis" target="_blank">{{{api-key-text}}}</a>
                      <span class="ui icon" data-tooltip="{{{api-key-tooltip}}}">
                        <i class="small help icon circular"></i>
                      </span>
                    </div>
                  </h4>
                  <div class="ui fluid icon input">
                    <input type="text" name="etherscan_api_key_option[api_key]" value="{{api-key-value}}">
                    <i class="key icon"></i>
                  </div>
                </div>

                <div class="column">
                  <div class="ui info message">
                    <div class="header">
                      Do you need an Etherscan API key?
                    </div>
                    <p>You need an Etherscan API Key only if:</p>
                    <ul class="list">
                      <li>You are using a Coin Smart Contract on the Ethereum Network</li>
                    </ul>
                    <div class="ui divider"></div>
                    <div class="header">
                      Why do you need an Etherscan API key?
                    </div>
                    <p>If you are planning to use the coin block explorer for your Coin on the Ethereum network, then you need to use an Etherscan API key, otherwise, if you are not using a coin smart contract or if it is not in the Ethereum network you don't need this API key.</p>
                  </div>

                </div>
                <div class="column">
                  <h4 class="ui header">
                    {{{separator-format}}}
                    <div class="sub header">
                      {{{thousands-decimals-separator}}}
                      <span class="ui icon" data-tooltip="{{{thousands-decimals-separator-tooltip}}}">
                        <i class="small help icon circular"></i>
                      </span>
                    </div>
                  </h4>
                    <select name="etherscan_api_key_option[number_separators]" class="ui dropdown labeled">
                      <option value="">{{{choose-separators}}}</option>
                      {{#number-separators}}
                        <option value="{{value}}" {{selected}}>{{label}}</option>
                      {{/number-separators}}
                    </select>
                </div>
               <div class="sixteen wide column">
                  <h4 class="ui header">
                    {{{decimals-to-show-text}}}
                    <div class="sub header">
                      {{{decimals-to-show-sub}}}
                      <span class="ui icon" data-tooltip="{{{decimals-to-show-tooltip}}}">
                        <i class="small help icon circular"></i>
                      </span>
                    </div>
                  </h4>
                  <div class="ui icon input">
                    <input type="text" placeholder="4" name="etherscan_api_key_option[decimals_to_show]" value="{{decimals-to-show}}" >
                    <i class="calendar outline icon"></i>
                  </div>
                </div>
               <div class="sixteen wide column">
                  <h4 class="ui header">
                    {{{date-format-in}}} <a href="http://php.net/manual/en/function.date.php" target="_blank">{{{php-style}}}</a>
                    <div class="sub header">
                      {{{date-format-in-sub}}}
                      <span class="ui icon" data-tooltip="{{{date-format-in-sub-tooltip}}}">
                        <i class="small help icon circular"></i>
                      </span>
                    </div>
                  </h4>
                  <div class="ui icon input" id="wpsc-coin-decimals">
                    <input type="text" placeholder="Y-m-d" name="etherscan_api_key_option[date_format]" value="{{date-format-value}}" >
                    <i class="calendar outline icon"></i>
                  </div>
                </div>
              </div>

              <p class="submit">
                <input type="submit" name="submit" id="submit" class="button button-primary" value="{{{save}}}">
              </p>

            </div>

            <div class="ui bottom attached warning message">
              <i class="icon help"></i>
              Need help? <a href="https://wpsmartcontracts.com/docs/doc-settings.php" target="_blank">read the documentation</a>.
            </div>

            </form>

        </div>

<script>
jQuery( ".wpsc-radio-ico" ).click(function() {
  jQuery("#wpsc_skin_hidden").val(jQuery("input[name='wpsc_skin_radio']:checked").val());
});
</script>