<template>
  <div class="manager-view centerDiv">

    <div class="row">
      <div class="col-sm-12">
        <h1 id="manager-name">{{ managerName }}</h1>
      </div>

      <div>🚧 Coming Soon 🚧</div>

      <!-- <div class="col-sm-12">
        <h3 id="manager-record">Career Record: 294-218</h3>
      </div>

      <div class="col-sm-12">
        <p id="manager-headline"></p>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-4">
        <h3 style="text-align: center">Teams Managed</h3>
        <div class="table-responsive-xl">
          <table style="text-align: center" class="table table-sm table-striped" id="manager-teams-table">
            <thead class="thead-dark">
              <tr>
                <th>Season</th>
                <th>Team</th>
                <th>Record</th>
              </tr>
              <tr>
                <td>7</td>
                <td><a href="/teams?abbrev=TK&amp;season=7">Tokyo Kaiju</a></td>
                <td id="season-7-record">47-41</td>
              </tr>
              <tr>
                <td>6</td>
                <td><a href="/teams?abbrev=TK&amp;season=6">Tokyo Kaiju</a></td>
                <td id="season-6-record">51-37</td>
              </tr>
              <tr>
                <td>5</td>
                <td><a href="/teams?abbrev=TK&amp;season=5">Tokyo Kaiju</a></td>
                <td id="season-5-record">55-33</td>
              </tr>
              <tr>
                <td>4</td>
                <td><a href="/teams?abbrev=TK&amp;season=4">Tokyo Kaiju</a></td>
                <td id="season-4-record">55-33</td>
              </tr>
              <tr>
                <td>3</td>
                <td><a href="/teams?abbrev=TK&amp;season=3">Tokyo Kaiju</a></td>
                <td id="season-3-record">49-39</td>
              </tr>
              <tr>
                <td>2</td>
                <td><a href="/teams?abbrev=TK&amp;season=2">Tokyo Kaiju</a></td>
                <td id="season-2-record">37-35</td>
              </tr>
            </thead>
            <tbody id="manager-teams"></tbody>
          </table>
        </div>
      </div>

      <div class="col-sm-5">
        <h3 style="text-align: center">Awards Received</h3>
        <div class="table-responsive-xl">
          <table style="text-align: center" class="table table-sm table-striped" id="manager-awards-table">
            <thead class="thead-dark">
              <tr>
                <th>Season</th>
                <th>Award</th>
                <th>Extras</th>
              </tr>
              <tr>
                <td>3</td>
                <td>AL Wildcard</td>
                <td><a href="/teams?abbrev=TK&amp;season=3">Tokyo Kaiju</a></td>
              </tr>
              <tr>
                <td>2</td>
                <td>Most Hated Ballpark</td>
                <td><a href="/teams?abbrev=TK&amp;season=2">Tokyo Kaiju</a></td>
              </tr>
              <tr>
                <td>2</td>
                <td>American League Pennant</td>
                <td><a href="/teams?abbrev=TK&amp;season=2">Tokyo Kaiju</a></td>
              </tr>
              <tr>
                <td>2</td>
                <td>AL East Leader</td>
                <td><a href="/teams?abbrev=TK&amp;season=2">Tokyo Kaiju</a></td>
              </tr>
            </thead>
            <tbody id="manager-awards"></tbody>
          </table>
        </div>
      </div> -->
    </div>

  </div>
</template>

<script lang="ts">

export default {
  name: "ManagerView",
  props: {
    managerName: { type: String, required: true },
  }
}
</script>