@model What3wordsAddressModel

<link rel="stylesheet" href="~/Plugins/Widgets.What3words/Content/styles.css" />

<!script type="module" src="https://cdn.what3words.com/javascript-components@4-latest/dist/what3words/what3words.esm.js"></!script>
<!script nomodule src="https://cdn.what3words.com/javascript-components@4-latest/dist/what3words/what3words.js?key=@(Model.ApiKey)"></!script>

<div class="inputs">
    <label for="w3w">@T("Plugins.Widgets.What3words.Address.Field.Label"):</label>
    <what3words-autosuggest variant="inherit" api_key="@(Model.ApiKey)" id="what3words-autosuggest_@(Model.Prefix)">
        <input placeholder="e.g. ///lock.spout.radar"
               type="text"
               name="@What3wordsDefaults.ComponentName"
               id="what3words"
               optional />
    </what3words-autosuggest>
    <div class="what3words_tooltip">?
        <div class="what3words_tooltiptext">
            <div>@T("Plugins.Widgets.What3words.Address.Field.Tooltip")</div>
            <a href="http://delivery.w3w.co/" target="_blank">@T("Plugins.Widgets.What3words.Address.Field.Tooltip.Link")</a>
        </div>
    </div>
</div>

<script asp-location="Footer">
    $(document).ready(function() {
        $("#@(Model.Prefix)_CountryId").change(function(){
            var selectedItem = $(this).children("option:selected").val();
            var w3w = $("#what3words-autosuggest_@(Model.Prefix)");
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.Action("GetAlpha2byCountryName", "What3wordsCountry"))",
                data: {
                    "countryId": selectedItem
                },
                success: function (data, textStatus, jqXHR) {
                    w3w.removeProp('clip_to_country');
                    if (data){
                        w3w.prop('clip_to_country', data);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    w3w.removeProp('clip_to_country');
                }
            });
        });
    });
</script>