{% extends "base.html" %}

{% set active_page = "assets" %}

{% block title %} New asset {% endblock %}

{% block divs %}

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <form action="../../assets" method="get">
                <button class="btn btn-sm btn-responsive btn-info" type="submit">Go to asset overview</button>
            </form>
        </div>
        <div class="col-sm-10">
        </div>
    </div>
    <form class="form-horizontal" method="POST" action="/assets/create/">
        {{ asset_form.csrf_token }}
        {{ asset_form.hidden_tag() }}
        <fieldset>
            <div class="row">
                <div class="col-sm-6">

                    <h2> Creating a new asset </h2>

                    <div class="form-group">
                        {{ asset_form.display_name.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.display_name(class_="form-control") }}
                            {% for error in asset_form.errors.display_name %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.asset_type_name.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.asset_type_name(class_="form-control") }}
                            {% for error in asset_form.errors.asset_type_name %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.market_id.label(class="col-sm-6 control-label")}}
                        <div class="col-sm-6">
                            {{ asset_form.market_id(class_="form-control") }}
                            {% for error in asset_form.errors.market_id%}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.owner_id.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.owner_id(class_="form-control") }}
                            {% for error in asset_form.errors.owner_id %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.capacity_in_mw.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.capacity_in_mw(class_="form-control") }}
                            {% for error in asset_form.errors.capacity_in_mw %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.unit.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.unit(class_="form-control") }}
                            {% for error in asset_form.errors.unit %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.event_resolution.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.event_resolution(class_="form-control") }}
                            {% for error in asset_form.errors.event_resolution %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.latitude.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.latitude(class_="form-control") }}
                            {% for error in asset_form.errors.latitude %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="form-group">
                        {{ asset_form.longitude.label(class="col-sm-6 control-label") }}
                        <div class="col-sm-6">
                            {{ asset_form.longitude(class_="form-control") }}
                            {% for error in asset_form.errors.longitude %}
                            <span style="color: red;">[{{error}}]</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div id="soc_info" style="display:none;">
                        <!-- show this only when the asset type field changes to "battery" or asset_type.data is already "battery" -->
                        <script type="text/javascript">
                            function show_or_hide_soc_info() {
                                if ($("#asset_type_name").val() == "battery") {
                                    $("#soc_info").show();
                                } else {
                                    $("#min_soc_in_mwh").val("0");
                                    $("#max_soc_in_mwh").val("0");
                                    $("#soc_info").hide();
                                }
                            }
                            show_or_hide_soc_info();
                            $("#asset_type_name").change(function () {
                                show_or_hide_soc_info();
                            });
                        </script>
                        <div class="form-group">
                            {{ asset_form.min_soc_in_mwh.label(class="col-sm-6 control-label") }}
                            <div class="col-sm-6">
                                {{ asset_form.min_soc_in_mwh(class_="form-control") }}
                                {% for error in asset_form.errors.min_soc_in_mwh %}
                                <span style="color: red;">[{{error}}]</span>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="form-group">
                            {{ asset_form.max_soc_in_mwh.label(class="col-sm-6 control-label") }}
                            <div class="col-sm-6">
                                {{ asset_form.max_soc_in_mwh(class_="form-control") }}
                                {% for error in asset_form.errors.max_soc_in_mwh %}
                                <span style="color: red;">[{{error}}]</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6"></div>
                    <div class="col-sm-6">
                        <input type="submit" value="Create">
                    </div>
                </div>
                <div class="col-sm-6">
                    <h3>Location</h3>
                    <small>(Click map to edit latitude and longitude in form)</small>
                    <div id="mapid"></div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

<!-- Initialise the map -->
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet-src.min.js"></script>
<script src="{{ url_for('flexmeasures_ui.static', filename='js/map-init.js') }}"></script>

<script type="text/javascript">

    // create map
    var assetMap = L
        .map('mapid', { center: [{{ map_center[0] }}, {{ map_center[1] }}], zoom: 10})
        .on('popupopen', function () {
            $(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
        });
    addTileLayer(assetMap, '{{ mapboxAccessToken }}');


    var location_icon = new L.DivIcon({
        className: 'map-icon',
        html: '<i class="icon-empty-marker center-icon supersize"></i>',
        iconSize: [100, 100], // size of the icon
        iconAnchor: [50, 50], // point of the icon which will correspond to marker's location
        popupAnchor: [0, -50] // point from which the popup should open relative to the iconAnchor
    });

    // dummy location somewhere else
    var newMarker = new L.marker([100, 100], { icon: location_icon }).addTo(assetMap);

    assetMap.on('click', function (e) {
        $("#latitude").val(e.latlng.lat.toFixed(4));
        $("#longitude").val(e.latlng.lng.toFixed(4));
        newMarker.setLatLng(e.latlng);
    });

</script>

{% endblock %}