{% comment %}
<!--
     On map Overlay renders as a little popop who shows information about the node selected by a click,
     closes with a click outside the popup but still in the map area, or it is possible close by clicking
     the "X" top-right corner
-->
{% endcomment %}
<!-- {% verbatim %} -->
<div id="popup_node_info" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content">
    Node ID: {{ o_se_group.popup_content.id }}<br />
    <label for="ol_node_type">Node type: </label>
    <select
      id="ol_node_type"
      name="ol_node_type"
      v-model="o_se_group.popup_content.type"
      disabled
    >
      <option value="fork">Intersection</option>
      <option v-if="o_se_group.popup_content.connections < 3" value="waypoint">
        Waypoint
      </option>
      <option v-if="o_se_group.popup_content.connections < 3" value="stop">
        Stop
      </option>
      <option v-if="o_se_group.popup_content.connections < 3" value="endpoint">
        Endpoint
      </option>
    </select>

    <div v-show="popup_node_type_is_stop">
      <label for="ol_in_stop_id">Stop ID: </label>
      <input
        type="text"
        id="ol_in_stop_id"
        name="ol_in_stop_id"
        placeholder="Stop ID"
        :value="o_se_group.popup_content.stop_info.stop_id"
        disabled
      />
      <label for="ol_in_stop_name">Stop name: </label>
      <input
        type="text"
        id="ol_in_stop_name"
        name="ol_in_stop_name"
        placeholder="Stop Name"
        :value="o_se_group.popup_content.stop_info.stop_name"
        disabled
      />
    </div>

    <button
      @click="changeNodeInfoFromPopup(o_se_group.popup_content.id)"
      disabled
    >
      save
    </button>
  </div>
</div>
<!-- {% endverbatim %} -->
