<template>
  <require from="./relation-row"></require>
  <table>
    <thead>
      <tr>
        <th>
          Underlying Pair
        </th>
        <th>
          Correlated Pair
        </th>
        <th>
          Fit Type
        </th>
        <th>
          # Months
        </th>
        <th>
          Actual/Predicted
        </th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="config of relationConfigs" as-element="compose" view-model='./relation-row' config.bind="config">
      <tr repeat.for="customer of customers">
        <td>
          <select value.bind="newConfig.underlyingCurrencyPair">
            <option repeat.for="currencyPair of currencyPairs" value.bind="currencyPair">${currencyPair}</option>
          </select>
        </td>
        <td>
          <select value.bind="newConfig.relatededCurrencyPair">
            <option repeat.for="currencyPair of currencyPairs" value.bind="currencyPair">${currencyPair}</option>
          </select>
        </td>
        <td>
          <select value.bind="newConfig.fitType">
            <option repeat.for="fitType of fitTypes" value.bind="fitType">${fitType}<option>
          </select>
        </td>
        <td>
          <input type="number" value.bind="newConfig.numMonths">
        </td>
        <td></td>
        <td>
          <button type="button" class="btn btn-success" click.trigger="addConfig()">Add</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>