<div class="s3_settings_block" style="display:none;">

  <table class="form-table">
    <tbody>
      <tr>
        <th scope="row">
          <label for="baseUrl-s3">Destination URL</label>
        </th>
        <td>
          <?php $tpl->displayTextfield($this, 'baseUrl-s3', 'http://mystaticsite.com', '', ''); ?><br>

          <p><i>Set this to the URL your visitors will use to access your site. For an S3 hosted website, you have a few options which will influence what you put in this field. </i></p>

        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="s3Key">Access Key ID</label>
        </th>
        <td>
         <?php $tpl->displayTextfield($this, 's3Key', 'Access Key ID', 'ie, AKIAIOSFODNN7EXAMPLE'); ?><br>

          <p><i>Your S3 user will need permissions to put objects into the bucket. Check that the user whose Key you are using has the correct permissions for S3. You may attach the 'AmazonS3FullAccess' to the user or give more fine grained permissions control via <a href="https://aws.amazon.com/iam/" target="_blank">AWS's IAM</a>.</i></p>
        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="s3Key">Secret Access Key</label>
        </th>
        <td>
          <?php $tpl->displayTextfield($this, 's3Secret', 'Secret Access Key', 'ie, wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY', 'password'); ?>
        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="s3Region">Region</label>
        </th>
        <td>
        <?php 

        // TODO: shift to S3 model/helper
        $s3_regions = array(
          "us-east-1" => "US East (N. Virginia)",
          "us-east-2" => "US East (Ohio)",
          "us-west-1" => "US West (N. California)",
          "us-west-2" => "US West (Oregon)",
          "ca-central-1" => "Canada (Central)",
          "ap-south-1" => "Asia Pacific (Mumbai)",
          "ap-northeast-2" => "Asia Pacific (Seoul)",
          "ap-southeast-1" => "Asia Pacific (Singapore)",
          "ap-southeast-2" => "Asia Pacific (Sydney)",
          "ap-northeast-1" => "Asia Pacific (Tokyo)",
          "ap-northeast-3" => "Asia Pacific (Osaka-Local)",
          "eu-central-1" => "EU (Frankfurt)",
          "eu-west-1" => "EU (Ireland)",
          "eu-west-2" => "EU (London)",
          "eu-west-3" => "EU (Paris)",
          "eu-north-1" => "EU (Stockholm)",
          "sa-east-1" => "South America (São Paulo)",
          "cn-north-1" => "China (Beijing)",
          "cn-northwest-1" => "China (Ningxia)",
        );
        ?>

          <?php $tpl->displaySelectMenu($this, $s3_regions, 's3Region', 'Region', 'ie, my-static-site'); ?><br>

          <span class="description">choose the AWS region your bucket was created in</span>
        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="s3Bucket">Bucket</label>
        </th>
        <td>
          <?php $tpl->displayTextfield($this, 's3Bucket', 'S3 Bucket', 'ie, my-static-site'); ?><br>

          <p><i>Your bucket name as it appears in your <a href="https://s3.console.aws.amazon.com/s3/home" target="_blank">AWS Console for S3</a>.</i></p>
        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="s3RemotePath">Subdirectory</label>
        </th>
        <td>
          <?php $tpl->displayTextfield($this, 's3RemotePath', 'Subfolder in your bucket', 'ie, static-website'); ?><br>

          <p><i>In case you want to put your site in a sub directory of a bucket, this will deploy all the static website files into the folder name you specify here.</i></p> 
        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="cfDistributionId">CloudFront Cache Invalidation</label>
        </th>
        <td>
          <?php $tpl->displayTextfield($this, 'cfDistributionId', 'CloudFront Distribution ID', 'ie, ABC123DEFX'); ?><br>

          <p><i>If using CloudFront in your S3 static website setup, enter the CloudFront Distribution ID here and it will create an invalidation request for all files at the end of the deployment process. The invalidation usually happens within a few minutes. You can check any pending invalidations in your <a href="https://console.aws.amazon.com/cloudfront/home" target="_blank">AWS Console's CloudFront page</a>. You AWS user will need to have the CloudFrontFullAccess permissions or a more controlled policy, that includes the ability to send CloudFront invalidation requests.</i></p>
        </td>
      </tr>
      <tr>
        <th scope="row">
          <label for="s3_test">Test S3 Settings</label>
        </th>
        <td>
          <button id="s3-test-button" type="button" class="btn-primary button">Test S3 Settings</button>
        </td>
      </tr>
    </tbody>
  </table>

<a href="https://docs.statichtmloutput.com/en/deploying/deployment-options/amazon-s3/" target="_blank">Read the docs</a> for more on deploying your WordPress site to S3
</div>
