        <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>
                    <p>Or if you are planning to support the following wallet</p>
                    <ul class="list">
                      <li>WalletConnect in Ethereum network</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>
                    <p>The Infura API key also provides support to Ethereum networks when using WalletConnect wallets.</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, like 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 it or not at your own discretion and risk.</p>
                  </div>

                </div>

                <div class="sixteen wide column">
                  <h4 class="ui header">
                    NFT Items per page
                  </h4>
                  <div class="ui 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 class="sixteen wide column">
                  <h4 class="ui header">
                    NFT Items order
                  </h4>
                  <div class="ui icon input">
                    <div class="ui toggle {{#reverse}}checked{{/reverse}} checkbox">
                      <input type="checkbox" name="etherscan_api_key_option[wpsc_reverse_order]" {{#reverse}}checked=""{{/reverse}}>
                      <label>Show items in reverse order (new items first)</label>
                    </div>    
                  </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">
                    BSCScan API Key Token
                    <div class="sub header">
                      Register for free, to get an BSCScan API Key  <a href="https://bscscan.com/apis" target="_blank">BSCScan API key</a>
                      <span class="ui icon" data-tooltip="Optimize the Coin Block Explorer section with a free BSCScan 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[bscscan_api_key]" value="{{bscscan-api-key-value}}">
                    <i class="key icon"></i>
                  </div>
                </div>

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

                <div class="column">
                  <h4 class="ui header">
                    Polygonscan API Key Token
                    <div class="sub header">
                      Register for free, to get an Polygonscan API Key  <a href="https://polygonscan.com/apis" target="_blank">Polygonscan API key</a>
                      <span class="ui icon" data-tooltip="Optimize the Coin Block Explorer section with a free Polygon 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[polygonscan_api_key]" value="{{polygonscan-api-key-value}}">
                    <i class="key icon"></i>
                  </div>
                </div>

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

                <div class="column">
                  <h4 class="ui header">
                    Snowtrace API Key Token
                    <div class="sub header">
                      Register for free, to get an Snowtrace API Key  <a href="https://snowtrace.io/apis" target="_blank">Snowtrace API key</a>
                      <span class="ui icon" data-tooltip="Optimize the Coin Block Explorer section with a free Snowtrace 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[avax_api_key]" value="{{avax-api-key-value}}">
                    <i class="key icon"></i>
                  </div>
                </div>

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

                <div class="column">
                  <h4 class="ui header">
                    FTMScan API Key Token
                    <div class="sub header">
                      Register for free, to get an FTMScan API Key  <a href="https://ftmscan.com/apis" target="_blank">FTMScan API key</a>
                      <span class="ui icon" data-tooltip="Optimize the Coin Block Explorer section with a free FTMScan 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[fantom_api_key]" value="{{fantom-api-key-value}}">
                    <i class="key icon"></i>
                  </div>
                </div>

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