{% if user %}
<style>
pre{white-space:wrap}
.client-container { 
    border: 1px solid #ddd; 
    padding: 15px; 
    margin-bottom: 20px; 
    border-radius: 5px; 
    background-color: #f9f9f9; 
}
.client-actions { 
    margin-top: 10px; 
    padding-top: 10px; 
    border-top: 1px solid #ccc; 
}
.client-actions a { 
    margin-right: 10px; 
    padding: 5px 10px; 
    text-decoration: none; 
    border-radius: 3px; 
}
.edit-btn { 
    background-color: #007bff; 
    color: white; 
}
.edit-btn:hover { 
    background-color: #0056b3; 
}
.delete-btn { 
    background-color: #dc3545; 
    color: white; 
}
.delete-btn:hover { 
    background-color: #c82333; 
}
.create-btn { 
    background-color: #28a745; 
    color: white; 
    padding: 10px 20px; 
    text-decoration: none; 
    border-radius: 3px; 
    display: inline-block; 
    margin-top: 20px; 
}
.create-btn:hover { 
    background-color: #218838; 
}
</style>
<div>Logged in as <strong>{{user}}</strong> (<a href="{{ url_for('.logout') }}">Log Out</a>)</div>

{% for client in clients %}
<div class="client-container">
<pre>
<strong>Client Info</strong>
  {%- for key in client.client_info %}
  <strong>{{ key }}: </strong>{{ client.client_info[key] }}
  {%- endfor %}
<strong>Client Metadata</strong>
  {%- for key in client.client_metadata %}
  <strong>{{ key }}: </strong>{{ client.client_metadata[key] }}
  {%- endfor %}
</pre>
    <div class="client-actions">
        <a href="{{ url_for('.edit_client', client_id=client.id) }}" class="edit-btn">수정</a>
        <form style="display: inline;" method="POST" 
              action="{{ url_for('.delete_client', client_id=client.id) }}"
              onsubmit="return confirm('정말로 이 클라이언트를 삭제하시겠습니까?')">
            <button type="submit" class="delete-btn" 
                    style="border: none; cursor: pointer; padding: 5px 10px; border-radius: 3px;">삭제</button>
        </form>
    </div>
</div>
{% endfor %}

<a href="{{ url_for('.create_client') }}" class="create-btn">새 클라이언트 생성</a>

{% else %}
<form action="" method="post">
  <input type="text" name="username" placeholder="username">
  <button type="submit">Login / Signup</button>
</form>
{% endif %}