@layout('layouts/v2')

@section('content')
<style>
  table {
    border: 1px solid #919191;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }

  table thead {
    text-align: center;
  }

  table tbody {
    text-align: right;
  }

  table tr {
    border-bottom: 1px solid #919191;
  }

  table tbody tr:nth-child(even) {
    background: var(--tertiary-color);
  }

  table th {
    background: var(--secondary-color);
    font-weight: bold;
  }

  table th,
  table td {
    padding: 1rem;
  }

  table th:not(last-of-type),
  table td:not(last-of-type) {
    border-right: 1px solid #919191;
  }
</style>

<div class="bg-purple-200 flex items-center justify-center">
  <div class="w-full bg-white shadow-md rounded px-8 pt-6 mt-5 pb-8 mb-4">
    <h1 class="text-gray-700 text-center text-2xl pb-5">Your Account Data</h1>

    <table class="w-full rounded-lg overflow-hidden sm:shadow-lg my-5">
      <tr>
        <th>
          Name
        </th>
        <th>
          Value
        </th>
      </tr>
      <tr>
        <td>
          E-Mail
        </td>
        <td>
          {{ mail }}
        </td>
      </tr>
      <tr>
        <td>
          Username
        </td>
        <td>
          {{ username }}
        </td>
      </tr>
      <tr>
        <td>
          Last Name
        </td>
        <td>
          {{ lastname }}
        </td>
      </tr>
      <tr>
        <td>
          Created account on
        </td>
        <td>
          {{ created }}
        </td>
      </tr>
      <tr>
        <td>
          Last account update on
        </td>
        <td>
          {{ updated }}
        </td>
      </tr>
    </table>

    <h1 class="text-gray-700 text-center text-2xl pb-5">Your Services</h1>
    <table class="w-full rounded-lg overflow-hidden sm:shadow-lg my-5">
      <tr>
        <th>
          Service ID
        </th>
        <th>
          Name
        </th>
        <th>
          Recipe ID
        </th>
        <th>
          Settings
        </th>
        <th>
          Created
        </th>
        <th>
          Last updated
        </th>
      </tr>

      @each(service in services)
      <tr>
        <td>
          {{ service.serviceId }}
        </td>
        <td>
          {{ service.name }}
        </td>
        <td>
          {{ service.recipeId }}
        </td>
        <td>
          {{ stringify(service.settings) }}
        </td>
        <td>
          {{ service.createdAt.toFormat('yyyy-MM-dd HH:mm:ss') }}
        </td>
        <td>
          {{ service.updatedAt.toFormat('yyyy-MM-dd HH:mm:ss') }}
        </td>
      </tr>
      @endeach
    </table>

    <h1 class="text-gray-700 text-center text-2xl pb-5">Your Workspaces</h1>
    <table>
      <tr>
        <th>
          Workspace ID
        </th>
        <th>
          Name
        </th>
        <th>
          Order
        </th>
        <th>
          Services
        </th>
        <th>
          Data
        </th>
        <th>
          Created
        </th>
        <th>
          Last updated
        </th>
      </tr>

      @each(workspace in workspaces)
      <tr>
        <td>
          {{ workspace.workspaceId }}
        </td>
        <td>
          {{ workspace.name }}
        </td>
        <td>
          {{ workspace.order }}
        </td>
        <td>
          {{ stringify(workspace.services) }}
        </td>
        <td>
          {{ stringify(workspace.data) }}
        </td>
        <td>
          {{ workspace.createdAt.toFormat('yyyy-MM-dd HH:mm:ss') }}
        </td>
        <td>
          {{ workspace.updatedAt.toFormat('yyyy-MM-dd HH:mm:ss') }}
        </td>
      </tr>
      @endeach
    </table>

    <div class="text-center">
      <a class="w-full font-bold text-sm text-gray-500 hover:text-gray-800 mb-3" href="/user/account">Back to My
        Account</a>
    </div>

  </div>
</div>
</div>
@endsection