<?php if ($this->previewMode): ?>
    <div class="form-control"><?= $value ?></div>
<?php else: ?>

    <?php if ($mode == 'date'): ?>

        <div
            id="<?= $this->getId() ?>"
            class="field-datepicker"
            data-control="datepicker"
            data-min-date="<?= $minDate ?>"
            data-max-date="<?= $maxDate ?>">
            <input
                type="text"
                id="<?= $this->getId('input') ?>"
                name="<?= $name ?>"
                value="<?= $value ?>"
                class="form-control align-right"
                autocomplete="off">
        </div>

    <?php elseif ($mode == 'datetime'): ?>

        <div class="row">
            <div class="col-md-6">
                <!-- Date -->
                <div
                    id="<?= $this->getId() ?>"
                    class="field-datepicker"
                    data-control="datepicker"
                    data-min-date="<?= $minDate ?>"
                    data-max-date="<?= $maxDate ?>">
                    <input
                        type="text"
                        id="<?= $this->getId('input') ?>"
                        name="<?= $name ?>"
                        value="<?= $value ?>"
                        class="form-control align-right"
                        autocomplete="off">
                </div>
            </div>
            <div class="col-md-6">
                <!-- Time -->
                <div
                    id="<?= $this->getId() ?>-time"
                    data-control="timepicker"
                    class="field-timepicker clockpicker">
                    <input
                        type="text"
                        id="<?= $this->getId('input') ?>-time"
                        name="<?= $timeName ?>"
                        value="<?= $timeValue ?>"
                        class="form-control align-right"
                        autocomplete="off"
                        data-autoclose="true"
                        data-placement="bottom"
                        data-align="right">
                </div>
            </div>
        </div>

    <?php elseif ($mode == 'time'): ?>

        <div
            id="<?= $this->getId() ?>"
            data-control="timepicker"
            class="field-timepicker clockpicker">
            <input
                type="text"
                id="<?= $this->getId('input') ?>"
                name="<?= $name ?>"
                value="<?= $value ?>"
                class="form-control align-right"
                autocomplete="off"
                data-autoclose="true"
                data-placement="bottom"
                data-align="right">
        </div>

    <?php endif ?>

<?php endif ?>