{% comment %}
<!--
     Shapes section just below the map there is a nav bar tab style, the
     shapes button shows this template code, an accordion with each shape ID
     contains the shape info: shape ID, start node, end node, and the waypoints
     (if those exists)
-->
{% endcomment %}
<!-- {% verbatim %} -->
<!-- SHAPES -->
<div
    :class="['tab-pane',
            'fade',
            currentActiveSection === 'shapes' ? 'active' : '',
            currentActiveSection === 'shapes' ? 'show' : ''
            ]"
    id="nav-shapes"
    role="tabpanel"
    aria-labelledby="nav-shapes-tab"
>
  <!-- TODO endpoints list -->
  <!-- <datalist id="endpoints_list">
         <option value="12">
         <option value="24">
         </datalist>
    -->
  <div class="container shapes-section-menu">
    <div class="row">
      <div class="col">
        <label class="form-label" for="file_gtfs_shapes_input"
          >Upload shapes.txt file</label
        ><br />
        <input
          type="file"
          class="form-control disabled"
          accept="plain/text,.txt"
          id="file_gtfs_shapes_input"
          name="file_gtfs_shapes_input"
          disabled
        />
      </div>
      <div class="col">
        <label class="form-label" for="file_gtfs_shapes_output"
          >Download shapes.txt file</label
        ><br />
        <button
          class="btn btn-primary form-control"
          id="file_gtfs_shapes_output"
          name="file_gtfs_shapes_output"
          @click="downloadShapesLocally()"
        >
          Save
        </button>
      </div>
      <div class="col">
          <label class="form-label" for="file_gtfs_shapes_output"
          >Push shapes to database</label
                                   ><br />
          <button
              class="btn btn-primary form-control"
              id="push_shapes_to_db"
              name="push_shapes_to_db"
              @click="pushShapesToDB()"
          >
              Save
          </button>
      </div>
    </div>
  </div>

  <div class="accordion se-accordion-top-sp" id="accordion_shape_section">
    <div v-for="shape in rev_shapes">
      <div class="accordion-item">
        <h2 class="accordion-header" :id="'heading'+shape.getID()">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            :data-bs-target="'#collapse'+shape.getID()"
            aria-expanded="false"
            :aria-controls="'collapseTwo'+shape.getID()"
            @click="selectShape($event, shape.getID())"
          >
            <strong>Shape ID>> </strong> {{ shape.getID() }}
          </button>
        </h2>
        <div
          :id="'collapse'+shape.getID()"
          class="accordion-collapse collapse"
          :aria-labelledby="'heading'+shape.getID()"
          data-bs-parent="#accordion_shape_section"
        >
          <div class="accordion-body">
            <div class="container">
              <div class="row">
                <div class="col se-col-min-width">
                  <ul class="list-group">
                    <li class="list-group-item">
                      <button
                        class="btn btn-success"
                        @click="updateShapeByID(shape.getID())"
                      >
                        save
                      </button>
                    </li>
                    <li class="list-group-item">
                      <label class="form-label">Shape ID</label>
                        <input
                          class="form-control"
                          type="text"
                          :id="'shape_section_shape_id_'+shape.getID()"
                          :value="shape.getID()"
                        />
                    </li>

                    <li class="list-group-item">
                      <label class="form-label">Start Node ID</label>
                        <input
                          class="form-control"
                          type="number"
                          list="endpoints_list"
                          :id="'shape_section_start_node_id_'+shape.getID()"
                          :value="shape.getStart()"
                        />
                    </li>
                    <li class="list-group-item">
                      <label class="form-label">End Node ID</label>
                        <input
                          class="form-control"
                          type="number"
                          :id="'shape_section_end_node_id_'+shape.getID()"
                          :value="shape.getEnd()"
                        />
                    </li>
                  </ul>
                </div>
                <div class="col se-col-min-width">
                  <ul class="list-group">
                    <li
                      v-for="waypoint,index in shape_valid_waypoints_list"
                      class="list-group-item"
                    >
                      <label class="form-label">Waypoint {{index + 1}}</label>
                          <div class="d-flex flex-row">
                              <div class="p-2">
                                  <input
                                      class="form-control"
                                      type="number"
                                      :value="waypoint"
                                  />
                              </div>
                              <div class="p-2">
                                  <button
                                      class="btn btn-danger"
                                      @click="deleteShapeWaypoint(waypoint)"
                                  >
                                      remove
                                  </button>
                              </div>
                          </div>
                    </li>
                    <li class="list-group-item">
                      <button
                        class="btn btn-success"
                        @click="updateShapeByID(shape.getID())"
                      >
                        save
                      </button>
                    </li>
                  </ul>
                  <!-- list-group -->
                </div>
                <!-- class col -->
              </div>
              <!-- class row -->
            </div>
            <!-- container -->
          </div>
          <!-- accordion body  -->
        </div>
      </div>
    </div>
  </div>
  <!-- accordion  -->
</div>
<!-- END SHAPES -->
<!-- {% endverbatim %} -->
