@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.created_at }}
              </td>
              <td>
                  {{ service.updated_at }}
              </td>
          </tr>
        @endeach
    </table>
    
    <h1 class="text-gray-700 text-center text-2xl pb-5">Your Workspaces</h1>
    <table>
        <tr>
            <th>
                Service 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.created_at }}
              </td>
              <td>
                  {{ workspace.updated_at }}
              </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