<div class="card mb-3">
    <div class="card-header">
        <h4>Database Size</h4>
    </div>
    <div class="card-body">
        <h5 class="mt-3">Current Database Size: </h5>
        <p> {{ databaseSize }} </p>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <h4>Prune On Demand</h4>
    </div>
    <div class="card-body">
        <form ng-submit="pruneDatabase(pruneOnDemandConfig.ageThresholdWeeks, pruneOnDemandConfig.deleteCustomGraphs)">

            <!-- Age Threshold in Weeks -->
            <div class="form-group">
                <label for="ageThresholdWeeksPrune"><b>How many weeks of data should be kept?:</b></label>
                <input type="number" class="form-control" id="ageThresholdWeeksPrune"
                    ng-model="pruneOnDemandConfig.ageThresholdWeeks" min="0">
                <span ng-show="submitPruningOnDemandAttempted && !isValidPruneOnDemandAgeThresholdWeeks()"
                    class="help-block">Please enter a valid age in weeks.</span>
            </div>

            <!-- Delete Custom Graphs -->
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="pruneOnDemandConfig.deleteCustomGraphData"> <b>Delete Custom
                        Graph Data?</b>
                </label>
            </div>

            <br>

            <!-- Submit Button -->
            <button type="submit" class="btn btn-primary">Prune Now</button>

            <br>
            <br>

            <p ng-show="pruneOnDemandMessage != ''"
                ng-class="{'alert-success': pruneOnDemandIsSuccess, 'alert-danger': !pruneOnDemandIsSuccess}">
                {{ pruneOnDemandMessage }}
            </p>

        </form>
    </div>
</div>


<div class="card mb-3">
    <div class="card-header">
        <h4>Pruning Schedule</h4>
    </div>
    <div class="card-body">
        <div ng-if="pruningSchedule" style="display: flex;">
            <div style="padding-right: 20px; border-right: 1px solid black;">
                <h5 class="mt-3">Cron Schedule:</h5>
                <p>Year: {{ pruningSchedule.year }}</p>
                <p>Month: {{ pruningSchedule.month }}</p>
                <p>Day of the Month: {{ pruningSchedule.day_of_the_month }}</p>
                <p>Week: {{ pruningSchedule.week }}</p>
                <p>Day of the Week: {{ pruningSchedule.day_of_the_week }}</p>
                <p>Hour: {{ pruningSchedule.hour }}</p>
                <p>Minute: {{ pruningSchedule.minute }}</p>
                <p>Second: {{ pruningSchedule.second }}</p>
            </div>
            <div style="margin-left: 20px;">
                <h5 class="mt-3">Schedule Details:</h5>
                <p>Next Run Time: {{ pruningSchedule.next_run_time }}</p>
                <p>Weeks to Keep: {{ pruningSchedule.weeks_to_keep }}</p>
                <p>Delete Custom Graphs: {{ pruningSchedule.delete_custom_graph_data }}</p>
            </div>
        </div>
    </div>

    <div class="card-body">
        <p>For maintaining optimal performance by regularly cleaning old data as your application scales, visit the <a
                href="https://flask-monitoringdashboard.readthedocs.io/en/latest/functionality.html#adding-database-cleaning-schedule"
                target="_blank">documentation</a> to learn about setting up and automating a
            database pruning schedule.</p>
    </div>

</div>