<?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 ?>">
            <div class="input-with-icon right-align">
                <i class="icon icon-calendar-o"></i>
                <input
                    type="text"
                    id="<?= $this->getId('input') ?>"
                    name="<?= $name ?>"
                    value="<?= $value ?>"
                    class="form-control align-right"
                    autocomplete="off"
                    <?= $field->getAttributes() ?> />
            </div>
        </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 ?>">
                    <div class="input-with-icon right-align">
                        <i class="icon icon-calendar-o"></i>
                        <input
                            type="text"
                            id="<?= $this->getId('input') ?>"
                            name="<?= $name ?>"
                            value="<?= $value ?>"
                            class="form-control align-right"
                            autocomplete="off"
                            <?= $field->getAttributes() ?> />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <!-- Time -->
                <div
                    id="<?= $this->getId() ?>-time"
                    data-control="timepicker"
                    class="field-timepicker clockpicker">
                    <div class="input-with-icon right-align">
                        <i class="icon icon-clock-o"></i>
                        <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"
                            <?= $field->getAttributes() ?> />
                    </div>
                </div>
            </div>
        </div>

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

        <div
            id="<?= $this->getId() ?>"
            data-control="timepicker"
            class="field-timepicker clockpicker">
            <div class="input-with-icon right-align">
                <i class="icon icon-clock-o"></i>
                <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"
                    <?= $field->getAttributes() ?> />
            </div>
        </div>

    <?php endif ?>

<?php endif ?>