@page "/transfer"
@using TIAMSharedUI.Shared

<PageTitle>Transfer</PageTitle>

<div class="text-center m-5">
    <h1>Transfer</h1>
    <h2 style="font-size:small">Swipe to select your destination!</h2>
</div>


    <SliderItemSelector @ref="slider" OnSliderChanged=@DisplaySlideData></SliderItemSelector>

<div class="wrapper">    
    <div class="text-center name">
        @message
    </div>
    <form class="p-3 mt-2">
        <div class="form-field d-flex align-items-center">
            <input type="tel" name="phone" id="phone" placeholder="Pick up address">
        </div>
        <div class="form-field d-flex align-items-center">            
            <input type="text" name="address" id="address" placeholder="Pick up address">
        </div>
        <div class="form-field d-flex align-items-center">
            <input type="date" name="date" id="date" placeholder="Date of transfer">
        </div>
        <div class="form-field d-flex align-items-center">
            <input type="time" name="time" id="time" placeholder="Time of transfer">
        </div>
        <div class="form-field d-flex align-items-center">
            <input type="number" name="time" id="passengers" placeholder="Number of passangers">
        </div>

        <a class="btn btn-primary mt-3" @onclick="next">Next</a>
    </form>    
</div>




@code {
    SliderItemSelector slider;
    public string message;    

    void DisplaySlideData()
    {
        message = " Target destination is " + slider.SliderElementId.ToString(); 
    }

    /*protected override void OnAfterRender(bool isFirst)
        {
        message = " Target destination is " + slider.SliderElementId.ToString();
    }*/

    public void next()
    {
        
    }

}