<section class="fgraph-page-config-body">
    <p class="notes">{{localize "foundry-graph.GraphPage.Hint"}}</p>

    <div class="form-group">
        <label>{{localize "foundry-graph.GraphPage.IconLabel"}}</label>
        <div class="form-fields">
            <input type="text" name="icon" value="{{icon}}" placeholder="{{defaultIcon}}" />
            <button type="button" class="file-picker" data-action="pickIcon"
                title="{{localize 'foundry-graph.GraphPage.PickIcon'}}">
                <i class="fa-solid fa-folder-open"></i>
            </button>
            <button type="button" data-action="clearIcon" title="{{localize 'foundry-graph.GraphPage.ClearIcon'}}">
                <i class="fa-solid fa-eraser"></i>
            </button>
        </div>
    </div>

    <div class="form-group">
        <label>{{localize "foundry-graph.GraphPage.Preview"}}</label>
        <div class="form-fields">
            <img class="fgraph-page-icon-preview" src="{{#if icon}}{{icon}}{{else}}{{defaultIcon}}{{/if}}" width="64"
                height="64" />
            <span class="notes">{{pageName}}</span>
        </div>
    </div>

    <div class="resource flex-group-center">
        <div class="resource-content flexrow flex-center flex-between">
        </div>
        <!-- Start Date Input -->
        <label for="startdate">{{localize "foundry-graph.GraphPage.start_date"}}</label>
        
        {{> "modules/foundry-graph/templates/partials/calendar-datetime.hbs"
        name="startdate"
        label=(localize "foundry-graph.GraphPage.start_date")
        value=startdate
        id="startdate"
        required=true}}
        <br><br>

        <!-- End Date Input -->
        <label for="enddate">{{localize "foundry-graph.GraphPage.end_date"}}</label>
        <input type="datetime-local" id="enddate" name="enddate" value="{{enddate}}">
        <br><br>

        <!-- Color Picker -->
        <label for="colorevent">{{localize "foundry-graph.GraphPage.event_color"}}</label>
        <input type="color" id="colorevent" name="colorevent" value="{{colorevent}}">

    </div>

    <footer class="sheet-footer flexrow">
        <button type="submit" data-action="save">
            <i class="fa-solid fa-floppy-disk"></i> {{localize "foundry-graph.Buttons.Save"}}
        </button>
        <button type="button" data-action="cancel">
            <i class="fa-solid fa-xmark"></i> {{localize "foundry-graph.Buttons.Cancel"}}
        </button>
    </footer>
</section>