@using Timelapse.Api;


@if(Value == null)
{
    <p>Loading...</p>
}else{
  <label>
   <input type="checkbox" @bind-value="Estimated">Estimated</label>

    @if(Estimated)
    {
        <div>
        Estimated Project Length:
        <br>
        <TimespanControl Value="@EstProjLen" />
        Estimated Video Length:
        <br>
        <TimespanControl Value="@EstVidLen" />
        </div>
    }else{
        <div>
            Interval:
            <br>
            <TimespanControl Value="@Interval" />
        </div>
    }
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Section</span>
  </div>
  <input type="text" @bind-value="Section" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">Resolution</span>
  </div>
  <input type="number" min="4" max="65535" @bind-value="Width" class="form-control">
  <span class="input-group-text">x</span>
  <input type="number" min="4" max="65535" @bind-value="Height" class="form-control">
</div>
}
@code {
    [Parameter]
    
    public TimelapseProject Value {get;set;}
    int Width {get {return Value.Width;} set{Value.Width=value;}}
    int Height {get {return Value.Height;} set{Value.Height=value;}}
    string Section {get {return Value.CurrentSection;} set {Value.CurrentSection=value;}}
    
    TimeSpan Interval {get {return Value.Interval;} set {Value.Interval=value;}}
    bool Estimated {get {return Value.Estimated;} set {Value.Estimated =value;}}
    TimeSpan EstProjLen {get {return Value.EstimatedProjectLength;} set{Value.EstimatedProjectLength= value;}}
     TimeSpan EstVidLen {get {return Value.EstimatedVideoLength;} set{Value.EstimatedVideoLength= value;}}
}