<div class="account-info-container">
    <?php if ( $attributes['show_title'] ) : ?>
        <h2 class="account-title"><?php _e( 'Your Account Information', 'ones-auth' ); ?></h2>
    <?php endif; ?>

    <?php if ( !empty( $attributes['messages'] ) ) : ?>
        <div class="account-messages">
            <?php foreach ( $attributes['messages'] as $message ) : ?>
                <p class="account-message"><?php echo $message; ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <div class="account-info">
        <?php
        $info_fields = [
            // 'sub' => __( 'OnesID User ID', 'ones-auth' ),
            // 'user_id' => __( 'Wordpress User ID', 'ones-auth' ),
            'username' => __( 'OnesID', 'ones-auth' ),
            'email' => __( 'Email', 'ones-auth' ),
            'first_name' => __( 'First Name', 'ones-auth' ),
            'last_name' => __( 'Last Name', 'ones-auth' ),
            // 'domain' => __( 'Domain', 'ones-auth' ),
            // 'username_without_domain' => __( 'Username without Domain', 'ones-auth' ),
            'localized_first_name' => __( 'Localized First Name', 'ones-auth' ),
            'localized_last_name' => __( 'Localized Last Name', 'ones-auth' ),
            'date_of_birth' => __( 'Date of Birth', 'ones-auth' ),
            'phone_number' => __( 'Phone Number', 'ones-auth' ),
            'identity_document_number' => __( 'Identity Document Number', 'ones-auth' ),
            'identity_document_issue_date' => __( 'Identity Document Issue Date', 'ones-auth' ),
            'identity_document_expiry_date' => __( 'Identity Document Expiry Date', 'ones-auth' ),
        ];

        echo '<pre>' . json_encode($attributes, JSON_PRETTY_PRINT) . '</pre>';

        foreach ( $info_fields as $field => $label ) :
            if ( isset( $attributes[$field] ) && $attributes[$field] !== '' ) :
        ?>
            <div class="info-group">
                <label><?php echo $label; ?></label>
                <span><?php echo esc_html( $attributes[$field] ); ?></span>
            </div>
        <?php
            endif;
        endforeach;
        ?>
    </div>
</div>

<style>
    .account-info-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .account-title {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
    .account-messages {
        margin-bottom: 20px;
    }
    .account-message {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
    }
    .account-info {
        display: grid;
        gap: 15px;
    }
    .info-group {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 10px;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .info-group label {
        font-weight: bold;
        margin-bottom: 5px;
        color: #555;
    }
    .info-group span {
        color: #333;
    }
</style>
