<div class="panel panel-default">
  <div class="panel-heading"><h3 class="panel-title">Product mappings</h3></div>
  <div class="panel-body">
    <p>
      <a href="{{modulelink}}" class="btn btn-default">Dashboard</a>
      <a href="{{modulelink}}&action=mappings" class="btn btn-primary">Mappings</a>
      <a href="{{modulelink}}&action=mtls" class="btn btn-default">mTLS</a>
    </p>

    <h4>Add or update mapping</h4>
    <form method="post" action="{{modulelink}}&action=save_mapping" class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">WHMCS product</label>
        <div class="col-sm-9">
          <select name="whmcs_product_id" class="form-control" required>
            {{mappings.product_options}}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">GameCloud plan slug</label>
        <div class="col-sm-9">
          <select name="plan_slug" class="form-control" required>
            {{mappings.plan_options}}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Default version</label>
        <div class="col-sm-9"><input type="text" name="default_version" value="1.21.1" class="form-control"></div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">Default software</label>
        <div class="col-sm-9">
          <select name="default_software" class="form-control">
            <option>VANILLA</option><option>PAPER</option><option>PURPUR</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
          <label><input type="checkbox" name="is_active" value="1" checked> Active</label>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
          <button type="submit" class="btn btn-success">Save mapping</button>
        </div>
      </div>
    </form>

    <h4>Current mappings</h4>
    <table class="table table-bordered">
      <thead><tr><th>Product ID</th><th>Name</th><th>Plan</th><th>Software</th><th>Active</th><th></th></tr></thead>
      <tbody>{{mappings.rows}}</tbody>
    </table>
  </div>
</div>
