<template>
    <div class="data">
        <div class="label">Last viewed:</div>
        <table class="data-table" id="asset-table">
            <tr class="table-row" id="table-head">
                <th class="Client">Client</th>
                <th class="Name">Name</th>
                <th class="Type">Type</th>
                <th class="State">State</th>
                <th class="User">User</th>
            </tr>
            <tr class="table-row" id="row-1">
                <td class="Client">...</td>
                <td class="Name">...</td>
                <td class="Type">...</td>
                <td class="State">...</td>
                <td class="User">...</td>
            </tr>
        </table>
    </div>
</template>
  
  
  
<script>

export default {
    name: "AssetTable",

}

</script>
  
    
    
    
<style scoped>
.data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    padding: 1.25rem 1.875rem;
    gap: 1.25rem;
    border-radius: 0.625rem;
    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
    background-color: #2c2c2c;
}

.data-table {
    width: 100%;
    padding: 0 0.625rem;
    table-layout: fixed;
    border-collapse: collapse;
}

.table-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 3.125rem;
    padding: 0.625rem;
    gap: 0.625rem;
    border-top: 0.0625rem solid #000000;
}

#table-head {
    border-top: none;
    border-bottom: 0.0625rem solid #000000;
}

th,
td {
    height: 1.875rem;
    text-align: left;
    padding: 0;
    color: #ffffff;
    letter-spacing: 5%;
    font: 400 0.875rem/1.875rem Overpass, sans-serif;
}

th {
    font: 700 0.875rem/1.875rem Overpass, sans-serif;
}

.Client {
    width: 33.3%;
    border-right: 0.0625rem solid #000000;
}

.Name {
    width: 33.3%;
    border-right: 0.0625rem solid #000000;
}

.Type {
    width: 12.7%;
    border-right: 0.0625rem solid #000000;
}

.State {
    width: 12.7%;
    border-right: 0.0625rem solid #000000;
}

.User {
    width: 8%;
}

.label {
  width: 6.0625em;
  height: 1.875em;
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.875em;
  letter-spacing: 0.05em;
  color: #FFFFFF;
}
</style>