<?php echo $map['js']; ?>
<style>
    .thumbnail {
        width: auto;
        height: auto;
        overflow: hidden;
    }

    .thumbnail img {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100%;
        width: auto;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>
<div class="content-header">
    <div class="row align-items-center">
        <div class="content-header-left col-md-6 col-12 mb-md-0 mb-1">
            <h3 class="content-header-title"><?= $judul ?></h3>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table">
            <tbody>
                <tr>
                    <td><?= $this->lang->line('nama') ?></td>
                    <td>: <?= $data->nama_lengkap; ?></td>
                    <td><?= $this->lang->line('tgl') ?></td>
                    <td>: <?= $data->tanggal; ?></td>
                </tr>
                <tr>
                    <td><?= $this->lang->line('jam_waktu') ?> </td>
                    <td>: <?= $this->fungsi->konversi_datetime($data->jam_absen) ?></td>
                    <td><?= $this->lang->line('keterangan') ?></td>
                    <td>: <?= $data->keterangan; ?></td>
                </tr>
                <tr>
                    <td>Timezone</td>
                    <td>: <?= $data->timezone; ?></td>
                    <td>GMT</td>
                    <td>: <?= $data->gmt; ?></td>
                </tr>
                <tr>
                    <td><?= $this->lang->line('lokasi') ?></td>
                    <td>: <?= $data->lokasi_absen; ?></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="row font-weight-bold">
                <div class="col-md-6 text-center">
                    <label class="text-uppercase"><?= $this->lang->line('lokasi_absensi') ?></label>
                </div>
                <div class="col-md-6 text-center">
                    <label class="text-uppercase"><?= $this->lang->line('foto_absensi') ?></label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 text-center">
                    <?= $map['html']; ?>
                </div>
                <div class="col-md-6 text-center thumbnail">
                    <img src="<?= $foto; ?>" class="portrait">
                </div>
            </div>
        </div>
    </div>
</div>
