[
    {
        "id": "1",
        "name": "Contact Add Edit",
        "shortcode": "[cwp-smpl-contact-add-edit]",
        "code": "<?php\r\n\r\n\/\/ Set the connected pages refs\r\n$listPage = '\/contact-list\/';\r\n$detailPage = '\/contact-details\/';\r\n$addEditPage = '\/contact-add-edit\/';\r\n\r\n\r\n\/\/ Adjust for preview mode\r\nif(isset($_GET['fm_cwp_data_id'])){\r\n\t\r\n\/\/ Set snippet Ids for use in preview mode only \r\n$listId = $_GET['fm_cwp_data_id'] + 2 ;\r\n$detailId = $_GET['fm_cwp_data_id'] + 1 ;\r\n$addEditId = $_GET['fm_cwp_data_id'] ;\r\n\t\r\n$listPage = '?fm_cwp_data_id=' . $listId . '&';\r\n$detailPage = '?fm_cwp_data_id=' . $detailId . '&';\r\n$addEditPage = '?fm_cwp_data_id=' . $addEditId . '&';\t\r\n\t\r\n}else{\r\n\t\r\n$listPage = $listPage . '?';\r\n$detailPage = $detailPage . '?';\r\n$addEditPage = $addEditPage . '?';\r\n\t\r\n}\r\n\r\n$defaultImage = '..\/wp-content\/plugins\/cwp-snippets\/assets\/images\/profile-placeholder.jpg';\r\n\r\n$error = '' ;\r\n$imgsrc = $defaultImage;\r\n\r\n$hideClear = \"display: none;\";\r\n$hideRemove = \"display: none;\";\r\n\r\n$recordId = isset($_GET['recordId']) ? sanitize_text_field(wp_unslash($_GET['recordId'])) : '';\r\n\r\n\r\n\/\/ fmCWP( host.domain, database, layout, user, password )\r\n\/\/ $fm = new fmCWP(FM_HOST, FM_DATABASE, FM_LAYOUT, FM_USER, FM_PASSWORD);\r\n\r\n$fm = new fmCWP(FM_HOST_DEMO, FM_DATABASE_DEMO, FM_LAYOUT_DEMO, FM_USER_DEMO, FM_PASSWORD_DEMO);\r\n\r\n\r\n\/\/ FORM HANDLERS -----------\r\n\r\nif( (isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['_wpnonce']) && wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'])), 'create_edit_snippet' )) || isset($_GET['delete'])){\r\n\r\n\t\r\n\t\/\/ If Delete email, phone or address, build the parameter to delete the portal record\r\n\tif(isset($_GET['delete']) && $_GET['delete'] != 'image'){ \r\n\r\n\t\t\/\/ Set the record Id\r\n\t\t$recordId = sanitize_text_field(wp_unslash($_GET['recordId'])) ;\r\n\r\n\t\t\/\/ Map delete to portal table\r\n\t\t$portalTableMap = [\r\n\t\t\t'email' => 'Email Addresses',\r\n\t\t\t'phone' => 'Phone Numbers',\r\n\t\t\t'address' => 'Addresses',\r\n\t\t];\r\n\r\n\t\t\/\/ Set portal table\r\n\t\t$portalTable = $portalTableMap[sanitize_text_field(wp_unslash($_GET['delete']))] ?? null;\r\n\r\n\t\t\/\/ Set related id\r\n\t\t$relatedId = isset($_GET['relatedId']) ? sanitize_text_field(wp_unslash($_GET['relatedId'])) : '' ;\r\n\r\n\t\t\/\/ Build the parameter\t\r\n\t\t$params = [\r\n\t\t\t\"fieldData\" => [\r\n\t\t\t\t\/\/ Delete ralate record ( table.recordId )\r\n\t\t\t\t\"deleteRelated\" => $portalTable . '.' . $relatedId,\r\n\t\t\t],\r\n\t\t];\r\n\t\t\t\t\r\n\t}\r\n\t\r\n\t\/\/ If Delete Image\r\n\tif(isset($_GET['delete']) && $_GET['delete'] == 'image'){ \r\n\r\n\t\t\/\/ Set the record Id\r\n\t\t$recordId = sanitize_text_field(wp_unslash($_GET['recordId'])) ;\r\n\r\n\t\t$params = [\r\n\t\t\t\"fieldData\" => [\r\n\t\t\t\t\"Photo\" => '',\r\n\t\t\t],\r\n\t\t];\r\n\t\t\t\t\r\n\t}\r\n\r\n\t\r\n\t\/\/ If Save Contact build the parameter array to edit the contact and portal records\r\n\tif( $_SERVER['REQUEST_METHOD'] === 'POST' ){\r\n\t\t\r\n\t\t\/\/ Set the record Id\r\n\t\t$recordId = isset( $_POST['recordId'] ) ? sanitize_text_field(wp_unslash($_POST['recordId'])) : '' ;\r\n\t\t\r\n\t\t\/\/ Assuming the form data is submitted via POST\r\n\t\t$contactData = [\r\n\t\t\t\"First Name\" => isset ( $_POST['first_name']) ? sanitize_text_field(wp_unslash($_POST['first_name'])) : '',\r\n\t\t\t\"Last Name\" => isset ( $_POST['last_name']) ? sanitize_text_field(wp_unslash($_POST['last_name'])) : '',\r\n\t\t\t\"Job Title\" => isset ( $_POST['job_title']) ? sanitize_text_field(wp_unslash($_POST['job_title'])) : '',\r\n\t\t\t\"Company\" => isset ( $_POST['company']) ? sanitize_text_field(wp_unslash($_POST['company'])) : '',\r\n\t\t\t\"Website\" => isset ( $_POST['website']) ? sanitize_text_field(wp_unslash($_POST['website'])) : '',\r\n\t\t\t\/\/ \"Photo\" => '',\r\n\t\t];\r\n\r\n\t\t\r\n\t\t\/\/ If related portal data is present, build the Portal Data array\r\n\t\tif(!empty($_POST['email_addresses']) || !empty($_POST['phone_numbers']) || !empty($_POST['addresses'])) {\r\n\t\t\t\r\n\t\t\t\/\/ Initialize variable\r\n\t\t\t$portalData = array();\r\n\r\n\t\t\t\/\/ Process email addresses\r\n\t\t\tif (!empty($_POST['email_addresses'])) {\r\n\t\t\t\tforeach (wp_unslash($_POST['email_addresses']) as $index => $email) {\r\n\t\t\t\t\t$portalData['Email Addresses'][] = [\r\n\t\t\t\t\t\t\"recordId\" => isset($email['record_id']) ? sanitize_text_field($email['record_id']) : '',\r\n\t\t\t\t\t\t\"Email Addresses::Type\" => isset($email['type']) ? sanitize_text_field($email['type']) : '',\r\n\t\t\t\t\t\t\"Email Addresses::Address\" => isset($email['address']) ? sanitize_email($email['address']) : '',\r\n\t\t\t\t\t];\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Process phone numbers\r\n\t\t\tif (!empty($_POST['phone_numbers'])) {\r\n\t\t\t\tforeach (wp_unslash($_POST['phone_numbers']) as $index => $phone) {\r\n\t\t\t\t\t$portalData['Phone Numbers'][] = [\r\n\t\t\t\t\t\t\"recordId\" => isset($phone['record_id']) ? sanitize_text_field($phone['record_id']) : '',\r\n\t\t\t\t\t\t\"Phone Numbers::Type\" => isset($phone['type']) ? sanitize_text_field($phone['type']) : '',\r\n\t\t\t\t\t\t\"Phone Numbers::Number\" => isset($phone['number']) ? sanitize_text_field($phone['number']) : '',\r\n\t\t\t\t\t];\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t\/\/ Process addresses\r\n\t\t\tif (!empty($_POST['addresses'])) {\r\n\t\t\t\tforeach (wp_unslash($_POST['addresses']) as $index => $address) {\r\n\t\t\t\t\t$portalData['Addresses'][] = [\r\n\t\t\t\t\t\t\"recordId\" => isset($address['record_id']) ? sanitize_text_field($address['record_id']) : null,\r\n\t\t\t\t\t\t\"Addresses::Type\" => isset($address['type']) ? sanitize_text_field($address['type']) : '',\r\n\t\t\t\t\t\t\"Addresses::Address Line 1\" => isset($address['line1']) ? sanitize_text_field($address['line1']) : '',\r\n\t\t\t\t\t\t\"Addresses::Address Line 2\" => isset($address['line2']) ? sanitize_text_field($address['line2']) : '',\r\n\t\t\t\t\t\t\"Addresses::City\" => isset($address['city']) ? sanitize_text_field($address['city']) : '',\r\n\t\t\t\t\t\t\"Addresses::State\" => isset($address['state']) ? sanitize_text_field($address['state']) : '',\r\n\t\t\t\t\t\t\"Addresses::Postal Code\" => isset($address['postal_code']) ? sanitize_text_field($address['postal_code']) : '',\r\n\t\t\t\t\t\t\"Addresses::Country\" => isset($address['country']) ? sanitize_text_field($address['country']) : '',\r\n\t\t\t\t\t];\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\/\/ Setting the parameters for the update\r\n\t\t\t$params = [\r\n\t\t\t\t\"fieldData\" => $contactData,\r\n\t\t\t\t\"portalData\" => $portalData,\r\n\t\t\t];\t\r\n\t\t\t\r\n\t\t}else{\r\n\t\t\t\r\n\t\t\t$params = [\r\n\t\t\t\t\"fieldData\" => $contactData,\r\n\t\t\t];\r\n\t\t\t\r\n\t\t}\r\n\t\t\r\n\t}\r\n\t\r\n\t\/\/ Connect to FileMaker database and create or edit the record\r\n\t\r\n\t\/\/ Create or Edit the record\r\n\tif(empty($recordId)){\r\n\t\t\/\/ Create the record\r\n\t\t$result = $fm->createRecord($params);\r\n\t}else{\r\n\t\t\/\/ Edit the record\r\n\t\t$result = $fm->editRecord($recordId, $params);\t\r\n\t}\r\n\t\t\r\n\t\/\/ Capture error\r\n\t$error = $fm->isError($result) ;\r\n\r\n\t\/\/ Capture Response Array\r\n\t$response = $fm->getResponse($result);\r\n\t\r\n\t\/\/ Uncoment to show response from API for troubleshooting\r\n\t\/\/ fmcwpShowResponse($response);\r\n\r\n\t\/\/ If no record id get record id from newly created record\t\r\n\t$recordId = empty($recordId) ? $response['response']['recordId'] : $recordId ;\r\n\t \r\n\t\/\/ Upload image if selected\r\n\tif(!$error && !empty($_FILES['profile-picture']['name'])){\r\n\r\n\t\t\/\/ File upload\r\n\t\t$result = $fm->uploadFormDataToContainer($recordId, \"Photo\", 1, $_FILES[\"profile-picture\"]);\r\n\r\n\t\t\/\/ Capture error\r\n\t\t$error = $fm->isError($result) ;\r\n\r\n\t\t\/\/ Capture Response Array\r\n\t\t$response = $fm->getResponse($result);\r\n\t\t\r\n\t\t\/\/ Uncoment to show response from API for troubleshooting\r\n\t\t\/\/ fmcwpShowResponse($response);\r\n\r\n\t}\r\n\t\r\n\tif($_SERVER['REQUEST_METHOD'] === 'POST' && !$error){\r\n\t\t\r\n\t\t$detaulurl = $detailPage . '&recordId=' . $recordId;\r\n\t\techo \"<script>window.location.href='$detaulurl';<\/script>\"; \r\n\t\t\r\n\t}\r\n\r\n\/\/ END FROM HANDLERS -----------\r\n}\r\n\r\n\/\/ Initialize variable arrays to display values in form\r\n$contact = $contact ?? [\r\n    \"First Name\" => \"\",\r\n    \"Last Name\" => \"\",\r\n    \"Job Title\" => \"\",\r\n    \"Company\" => \"\",\r\n    \"Website\" => \"\",\r\n\t\"photoType\" => \"\",\r\n\t\"cPhotoBase64\" => \"\",\r\n\t\r\n];\r\n$phoneNumbers = $phoneNumbers ?? [];\r\n$emailAddresses = $emailAddresses ?? [];\r\n$addresses = $addresses ?? [];\r\n\r\n\r\n\/\/ If record id exists get the record from FileMaker database\r\nif (!empty($recordId)){\r\n\t\t\r\n\r\n\t\/\/ Change layout if not default layout\r\n\t$fm->setFilemakerLayout(\"Contact Details\");\r\n\r\n\t\/\/ Get record by id\r\n\t$result = $fm->getRecord($recordId);\r\n\r\n\t\/\/ Capture error\r\n\t$error = $fm->isError($result) ;\r\n\r\n\t\/\/ Capture Response Array\r\n\t$response = $fm->getResponse($result);\r\n\r\n\r\n\t\/\/ If record retrieved initialize array variables\r\n\tif(!$error){\r\n\t\t\r\n\t\t\/\/ Assuming the response array is stored in $response\r\n\t\t$contact = $response['response']['data'][0]['fieldData'];\r\n\t\t$phoneNumbers = $response['response']['data'][0]['portalData']['Phone Numbers'];\r\n\t\t$emailAddresses = $response['response']['data'][0]['portalData']['Email Addresses'];\r\n\t\t$addresses = $response['response']['data'][0]['portalData']['Addresses'];\r\n\t\t\r\n\t\t\/\/ Use Base64 or container urls based on the Base64 switch in the CWP Snippets Demo database. It is seet to use Base64 by default\r\n\t\t\/\/ If images do not display when using container data urls please refer to the documentation for instructions on how to turn on persistant urls on your server\r\n\t\t$useBase64 = isset ( $contact['Settings::Base64'] ) ? $contact['Settings::Base64'] : true  ;\r\n\t\t\r\n\t\tif(empty($contact['Photo'])){\r\n\t\t\t$imgsrc = $defaultImage ;\r\n\t\t}else{\r\n\t\t\t$imgsrc = $useBase64 ? 'data:image\/' . $contact['Photo'] . ';base64,' . $contact['cPhotoBase64'] : $contact['Photo'] ;\r\n\t\t\t$hideRemove = \"\"; \/\/ An image exists, so the \"Remove\" button should be visible.\r\n\t\t}\r\n\t\t\r\n\t}\r\n\t\r\n}\r\n\r\n\/\/ Display Formatted response array\r\n\/\/ fmcwpShowResponse($params);\r\n\r\n\/\/ If no errors build the form\r\nif(!$error){\r\n\r\n?>\r\n\r\n<div style=\"margin: 25px 0 75px 0;\">\r\n    <div class=\"form-card\">\r\n        <form action=\"\" method=\"POST\" enctype=\"multipart\/form-data\">\r\n            <?php wp_nonce_field('create_edit_snippet'); ?>\r\n            <?php if (isset($addEditId)) {\r\n                echo '<input type=\"hidden\" name=\"fm_cwp_data_id\" value=\"' . $addEditId . '\">';\r\n            } ?>\r\n            <input type=\"hidden\" name=\"recordId\" value=\"<?php echo $recordId; ?>\">\r\n\r\n            <!-- Image Upload Section -->\r\n            <div class=\"image-upload-section\">\r\n                <div class=\"image-preview\">\r\n                    <img id=\"profile-picture-preview\" src=\"<?php echo $imgsrc; ?>\" alt=\"Profile Picture\">\r\n                <\/div>\r\n                <div class=\"choose-image\">\r\n                    <button for=\"profile-picture\" class=\"fm-button\">Choose Image<\/button>\r\n                    <input type=\"file\" id=\"profile-picture\" name=\"profile-picture\" accept=\"image\/*\" class=\"image-select\" onchange=\"previewImage(event)\">\r\n                <\/div>\r\n                <button id=\"clear-button\" type=\"button\" class=\"clear-button\" onclick=\"clearImage()\" style=\"<?php echo $hideClear; ?>\">Clear<\/button>\r\n\t\t\t\t<a id=\"remove-button\" type=\"button\" class=\"clear-button\" \r\n\t\t\t\t   href=\"<?php echo $addEditPage . 'recordId=' . $recordId . '&delete=image'; ?>\" \r\n\t\t\t\t   onclick=\"return confirmDeletion(event, this.href);\" style=\"<?php echo $hideRemove; ?>\">Remove<\/a>\r\n            <\/div>\r\n\r\n            <!-- Edit Form Section -->\r\n            <div class=\"form-section\">\r\n                <label for=\"first_name\">First Name<\/label>\r\n                <input type=\"text\" id=\"first_name\" name=\"first_name\" value=\"<?php echo htmlspecialchars($contact['First Name']); ?>\">\r\n            <\/div>\r\n\r\n            <div class=\"form-section\">\r\n                <label for=\"last_name\">Last Name<\/label>\r\n                <input type=\"text\" id=\"last_name\" name=\"last_name\" value=\"<?php echo htmlspecialchars($contact['Last Name']); ?>\">\r\n            <\/div>\r\n\r\n            <div class=\"form-section\">\r\n                <label for=\"job_title\">Job Title<\/label>\r\n                <input type=\"text\" id=\"job_title\" name=\"job_title\" value=\"<?php echo htmlspecialchars($contact['Job Title']); ?>\">\r\n            <\/div>\r\n\r\n            <div class=\"form-section\">\r\n                <label for=\"company\">Company<\/label>\r\n                <input type=\"text\" id=\"company\" name=\"company\" value=\"<?php echo htmlspecialchars($contact['Company']); ?>\">\r\n            <\/div>\r\n\r\n            <div class=\"form-section\">\r\n                <label for=\"website\">Website<\/label>\r\n                <input type=\"text\" id=\"website\" name=\"website\" value=\"<?php echo htmlspecialchars($contact['Website']); ?>\">\r\n            <\/div>\r\n\r\n\r\n\t\t\t<!-- Email Section -->\r\n\t\t\t<hr style=\"border-top: 1px solid #ddd; margin: 40px 0 10px 0;\">\r\n\t\t\t<label style=\"margin: 10px 0 10px 0;\">Email:<\/label>\r\n\t\t\t<div id=\"email_addresses\">\r\n\t\t\t\t<?php foreach ($emailAddresses as $i => $email): ?>\r\n\t\t\t\t<div class=\"email_address\" id=\"email_<?php echo $i; ?>\" style=\"display: flex; gap: 10px; align-items: center;\">\t\t\t\t\r\n\t\t\t\t\t<div style=\"flex: 3; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"email_addresses[<?php echo $i; ?>][record_id]\" value=\"<?php echo $email['recordId']; ?>\">\r\n\t\t\t\t\t\t<select id=\"email_type_<?php echo $i; ?>\" name=\"email_addresses[<?php echo $i; ?>][type]\" style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t\t\t<option value=\"<?php echo $email['Email Addresses::Type']; ?>\"><?php echo $email['Email Addresses::Type']; ?><\/option>\r\n\t\t\t\t\t\t\t<option value=\"Home\">Home<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Work\">Work<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Other\">Other<\/option>\r\n\t\t\t\t\t\t<\/select>\r\n\t\t\t\t\t<\/div>\t\t\t\t\r\n\t\t\t\t\t<div style=\"flex: 8; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t<input type=\"email\" id=\"email_address_<?php echo $i; ?>\" name=\"email_addresses[<?php echo $i; ?>][address]\" value=\"<?php echo htmlspecialchars($email['Email Addresses::Address']); ?>\">\r\n\t\t\t\t\t<\/div>\t\t\t\t\r\n\t\t\t\t\t<div style=\"flex: 1; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t\t<a class=\"delete-button\" href=\"<?php echo $addEditPage . 'recordId=' . $recordId . '&delete=email&relatedId=' . $email['recordId']; ?>\" onclick=\"return confirmDeletion(event, this.href);\">X<\/a>\r\n\t\t\t\t\t<\/div>\t\t\t\t\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<?php endforeach; ?>\r\n\t\t\t<\/div>\r\n\t\t\t<button type=\"button\" class=\"fm-button\" onclick=\"addEmailAddress()\">Add Email<\/button>\r\n\r\n\r\n\t\t\t<!-- Phone Section -->\r\n\t\t\t<hr style=\"border-top: 1px solid #ddd; margin: 40px 0 10px 0;\">\r\n\t\t\t<label style=\"margin: 10px 0 10px 0;\">Phone:<\/label>\r\n\t\t\t<div id=\"phone_numbers\">\r\n\t\t\t\t<?php foreach ($phoneNumbers as $i => $phone): ?>\r\n\t\t\t\t<div class=\"phone_number\" id=\"phone_<?php echo $i; ?>\" style=\"display: flex; gap: 10px; align-items: center;\">\r\n\t\t\t\t\t<div style=\"flex: 3;  margin-bottom: 15px;\">\r\n\t\t\t\t\t\t<input type=\"hidden\" id=\"phone-recordId\" name=\"phone_numbers[<?php echo $i; ?>][record_id]\" value=\"<?php echo $phone['recordId']; ?>\">\r\n\t\t\t\t\t\t<select id=\"phone_type_<?php echo $i; ?>\" name=\"phone_numbers[<?php echo $i; ?>][type]\" style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t\t\t<option value=\"<?php echo $phone['Phone Numbers::Type']; ?>\"><?php echo $phone['Phone Numbers::Type']; ?><\/option>\r\n\t\t\t\t\t\t\t<option value=\"Home\">Home<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Office\">Office<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Mobile\">Mobile<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Other\">Other<\/option>\r\n\t\t\t\t\t\t<\/select>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div style=\"flex: 5; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t<input type=\"text\" id=\"phone_Number_<?php echo $i; ?>\" name=\"phone_numbers[<?php echo $i; ?>][number]\" value=\"<?php echo $phone['Phone Numbers::Number']; ?>\">\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div style=\"flex: 4; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t\t<a class=\"delete-button\" href=\"<?php echo $addEditPage . 'recordId=' . $recordId . '&delete=phone&relatedId=' . $phone['recordId']; ?>\" onclick=\"return confirmDeletion(event, this.href);\">X<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<?php endforeach; ?>\r\n\t\t\t<\/div>\r\n\t\t\t<button type=\"button\" class=\"fm-button\" onclick=\"addPhoneNumber()\">Add Phone<\/button>\r\n\r\n\r\n\t\t\t<!-- Address Section -->\r\n\t\t\t<hr style=\"border-top: 1px solid #ddd; margin: 30px 0\">\r\n\t\t\t<label style=\"margin: 10px 0 10px 0;\">Address:<\/label>\r\n\t\t\t<div id=\"addresses\">\r\n\t\t\t\t<?php foreach ($addresses as $i => $address): ?>\r\n\t\t\t\t<div style=\"display: flex; gap: 10px; align-items: center;\">\r\n\t\t\t\t\t<div class=\"address\" style=\"flex: 1; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t<input type=\"hidden\" id=\"address-recordId\" name=\"addresses[<?php echo $i; ?>][record_id]\" value=\"<?php echo $address['recordId']; ?>\">\r\n\t\t\t\t\t\t<select id=\"address_type_<?php echo $i; ?>\" name=\"addresses[<?php echo $i; ?>][type]\" style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t\t\t<option value=\"<?php echo $address['Addresses::Type']; ?>\"><?php echo $address['Addresses::Type']; ?><\/option>\r\n\t\t\t\t\t\t\t<option value=\"Home\">Home<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Work\">Work<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Other\">Other<\/option>\r\n\t\t\t\t\t\t<\/select>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div style=\"flex: 4; margin-bottom: 15px; text-align: right;\">\r\n\t\t\t\t\t\t<a class=\"delete-button\" href=\"<?php echo $addEditPage . 'recordId=' . $recordId . '&delete=address&relatedId=' . $address['recordId']; ?>\" onclick=\"return confirmDeletion(event, this.href);\">X<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<div style=\"margin-bottom: 15px;\">\r\n\t\t\t\t\t<input type=\"text\" id=\"address1_<?php echo $i; ?>\" name=\"addresses[<?php echo $i; ?>][line1]\" placeholder=\"Address Line 1\" value=\"<?php echo $address['Addresses::Address Line 1']; ?>\" \r\n\t\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<div style=\"margin-bottom: 15px;\">\r\n\t\t\t\t\t<input type=\"text\" id=\"address2_<?php echo $i; ?>\" name=\"addresses[<?php echo $i; ?>][line2]\" placeholder=\"Address Line 2\" value=\"<?php echo $address['Addresses::Address Line 2']; ?>\" \r\n\t\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<div style=\"display: flex; gap: 10px; margin-bottom: 15px;\">\r\n\t\t\t\t\t<div style=\"flex: 4;\">\r\n\t\t\t\t\t\t<input type=\"text\" id=\"city_<?php echo $i; ?>\" name=\"addresses[<?php echo $i; ?>][city]\" placeholder=\"City\" value=\"<?php echo $address['Addresses::City']; ?>\" \r\n\t\t\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div style=\"flex: 1;\">\r\n\t\t\t\t\t\t<input type=\"text\" id=\"state_<?php echo $i; ?>\" name=\"addresses[<?php echo $i; ?>][state]\" placeholder=\"State\" value=\"<?php echo $address['Addresses::State']; ?>\" \r\n\t\t\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div style=\"flex: 2;\">\r\n\t\t\t\t\t\t<input type=\"text\" id=\"postal_code_<?php echo $i; ?>\" name=\"addresses[<?php echo $i; ?>][postal_code]\" placeholder=\"Postal Code\" value=\"<?php echo $address['Addresses::Postal Code']; ?>\" \r\n\t\t\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<div style=\"width: 300px; margin-bottom: 15px;\">\r\n\t\t\t\t\t<input type=\"text\" id=\"country_<?php echo $i; ?>\" name=\"addresses[<?php echo $i; ?>][country]\" placeholder=\"Country\" value=\"<?php echo $address['Addresses::Country']; ?>\" \r\n\t\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t<\/div><br>\r\n\t\t\t\t<?php endforeach; ?>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<button type=\"button\" class=\"fm-button\" onclick=\"addAddress()\">Add Address<\/button>\r\n\r\n            <hr class=\"section-divider\">\r\n            <div class=\"submit-section\">\r\n                <input type=\"submit\" class=\"fm-button\" value=\"Save Contact\" class=\"submit-button\">\r\n            <\/div>\r\n        <\/form>\r\n\r\n        <div class=\"cancel-section\">\r\n            <a class=\"clear-button cancel-button\" href=\"<?php if (!empty($recordId)) {\r\n                echo $detailPage . 'recordId=' . $recordId;\r\n            } else {\r\n                echo $listPage;\r\n\t\t\t} ?>\">Cancel<\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n<?php\r\n}\r\n\r\n\r\n\/\/ Display Error Message\r\nif($error){\r\n\t$message = 'An unknown error occurred.'; \/\/ Initialize message to prevent errors\r\n\t\r\n\tif(isset($response)){\t\t\r\n\t\tif ( is_array($response)){\r\n\t\t\t$message = 'Error!! ' . $response['messages'][0]['message'];\r\n\t\t}else{\r\n\t\t\t$message = 'Error!! ' . $response;\r\n\t\t}\t\r\n\t}\r\n\t\r\n\techo '<div style=\"color: red; text-align: center;\">' . $message . '<\/div>';\r\n\t\t\r\n}\r\n\r\n\r\n?>\r\n\r\n\r\n\r\n<!------------ JAVA SCRIPTS ------------>\r\n<script>\r\n\t\r\n\tfunction previewImage(event) {\r\n\t\tvar reader = new FileReader();\r\n\t\treader.onload = function() {\r\n\t\t\tvar output = document.getElementById('profile-picture-preview');\r\n\t\t\toutput.src = reader.result;\r\n\t\t\tdocument.getElementById('clear-button').style.display = 'inline-block'; \/\/ Show the clear button\r\n\t\t\tdocument.getElementById('remove-button').style.display = 'none'; \/\/ Hide the remove button\r\n\t\t}\r\n\t\treader.readAsDataURL(event.target.files[0]);\r\n\t}\r\n\r\n\tfunction clearImage() {\r\n\t\tdocument.getElementById('profile-picture').value = ''; \/\/ Clear the file input\r\n\t\tdocument.getElementById('profile-picture-preview').src = '..\/wp-content\/plugins\/cwp-snippets\/assets\/images\/profile-placeholder.jpg'; \/\/ Reset to the default image\r\n\t\tdocument.getElementById('clear-button').style.display = 'none'; \/\/ Hide the clear button\r\n\t}\r\n\r\n\t\t\r\n    let emailIndex = <?php echo count($emailAddresses); ?>; \/\/ Start the index from the number of existing email addresses\r\n\t\r\n\r\n\tfunction addEmailAddress() {\r\n\t\tconst container = document.getElementById('email_addresses');\r\n\t\tconst div = document.createElement('div');\r\n\t\tdiv.className = 'email_address';\r\n\t\tdiv.id = `email_${emailIndex}`;\r\n\t\tdiv.innerHTML = `\r\n\t\t\t<div class=\"email_address\" style=\"display: flex; gap: 10px; align-items: center;\">\r\n\t\t\t\t<div style=\"flex: 3; margin-bottom: 15px;\">\r\n\t\t\t\t\t<input type=\"hidden\" name=\"email_addresses[${emailIndex}][record_id]\">\r\n\t\t\t\t\t<select id=\"email_type_${emailIndex}\" name=\"email_addresses[${emailIndex}][type]\" style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t\t<option value=\"Home\">Home<\/option>\r\n\t\t\t\t\t\t<option value=\"Work\">Work<\/option>\r\n\t\t\t\t\t\t<option value=\"Other\">Other<\/option>\r\n\t\t\t\t\t<\/select>\r\n\t\t\t\t<\/div>\t\t\t\t\r\n\t\t\t\t<div style=\"flex: 8; margin-bottom: 15px;\">\r\n\t\t\t\t\t<input type=\"email\" id=\"email_address_${emailIndex}\" name=\"email_addresses[${emailIndex}][address]\">\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div style=\"flex: 1; margin-bottom: 15px;\">\r\n\t\t\t\t\t<a class=\"delete-button\" href=\"javascript:void(0);\" onclick=\"removeEmailAddress(${emailIndex})\">X<\/a>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t`;\r\n\t\tcontainer.appendChild(div);\r\n\t\temailIndex++;\r\n\t}\r\n\r\n\tfunction removeEmailAddress(index) {\r\n\t\tconst emailDiv = document.getElementById(`email_${index}`);\r\n\t\tif (emailDiv) {\r\n\t\t\temailDiv.remove();\r\n\t\t}\r\n\t}\r\n\t\t\r\n\t\r\n\t\t\r\n\tlet phoneIndex = <?php echo count($phoneNumbers); ?>; \/\/ Start the index from the number of existing phone Numbers\r\n\t\r\n\tfunction addPhoneNumber() {\r\n\t\tconst container = document.getElementById('phone_numbers');\r\n\t\tconst div = document.createElement('div');\r\n\t\tdiv.className = 'phone_number';\r\n\t\tdiv.id = `phone_${phoneIndex}`;\r\n\t\tdiv.innerHTML = `\r\n\t\t\t<div class=\"phone_number\" id=\"phone_${phoneIndex}\" style=\"display: flex; gap: 10px; align-items: center;\">\r\n\t\t\t\t\t<div style=\"flex: 3;  margin-bottom: 15px;\">\r\n\t\t\t\t\t\t\t<input type=\"hidden\" id=\"phone-recordId\" name=\"phone_numbers[${phoneIndex}][record_id]\">\r\n\t\t\t\t\t\t\t<select id=\"phone_type_${phoneIndex}\" name=\"phone_numbers[${phoneIndex}][type]\" style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t\t\t\t<option value=\"Home\">Home<\/option>\r\n\t\t\t\t\t\t\t\t<option value=\"Office\">Office<\/option>\r\n\t\t\t\t\t\t\t\t<option value=\"Mobile\">Mobile<\/option>\r\n\t\t\t\t\t\t\t\t<option value=\"Other\">Other<\/option>\r\n\t\t\t\t\t\t\t<\/select>\r\n\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\t<div style=\"flex: 5; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t\t<input type=\"text\" id=\"phone_Number_${phoneIndex}\" name=\"phone_numbers[${phoneIndex}][number]\">\r\n\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t<div style=\"flex: 4; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t\t<a class=\"delete-button\" href=\"javascript:void(0);\" onclick=\"removePhoneNumber(${phoneIndex})\">X<\/a>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t`;\r\n\t\tcontainer.appendChild(div);\r\n\t\tphoneIndex++;\r\n\t}\r\n\r\n\tfunction removePhoneNumber(index) {\r\n\t\tconst phoneDiv = document.getElementById(`phone_${index}`);\r\n\t\tif (phoneDiv) {\r\n\t\t\tphoneDiv.remove();\r\n\t\t}\r\n\t}\r\n\t\t\r\n\t\t\r\n\tlet addressIndex = <?php echo count($addresses); ?>; \/\/ Start the index from the number of existing phone Numbers\r\n\t\r\n\tfunction addAddress() {\r\n\t\tconst container = document.getElementById('addresses');\r\n\t\tconst div = document.createElement('div');\r\n\t\tdiv.className = 'address';\r\n\t\tdiv.id = `address_${addressIndex}`;\r\n\t\tdiv.innerHTML = `\r\n\t\t\t<div style=\"display: flex; gap: 10px; align-items: center;\">\r\n\t\t\t\t<div class=\"address\" style=\"flex: 1; margin-bottom: 15px;\">\r\n\t\t\t\t\t\t<input type=\"hidden\" id=\"address-recordId\" name=\"addresses[${addressIndex}][record_id]\">\r\n\t\t\t\t\t\t<select id=\"address_type_${addressIndex}\" name=\"addresses[${addressIndex}][type]\" style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t\t\t\t\t<option value=\"Home\">Home<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Work\">Work<\/option>\r\n\t\t\t\t\t\t\t<option value=\"Other\">Other<\/option>\r\n\t\t\t\t\t\t<\/select>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<div style=\"flex: 4; margin-bottom: 15px; text-align: right;\">\r\n\t\t\t\t\t\t<a class=\"delete-button\" href=\"javascript:void(0);\" onclick=\"removeAddress(${addressIndex})\">X<\/a>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<div style=\"margin-bottom: 15px;\">\r\n\t\t\t\t<input type=\"text\" id=\"address1_${addressIndex}\" name=\"addresses[${addressIndex}][line1]\" placeholder=\"Address Line 1\" \r\n\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div style=\"margin-bottom: 15px;\">\r\n\t\t\t\t<input type=\"text\" id=\"address2_${addressIndex}\" name=\"addresses[${addressIndex}][line2]\" placeholder=\"Address Line 2\" \r\n\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div style=\"display: flex; gap: 10px; margin-bottom: 15px;\">\r\n\t\t\t<div style=\"flex: 4;\">\r\n\t\t\t<input type=\"text\" id=\"city_${addressIndex}\" name=\"addresses[${addressIndex}][city]\" placeholder=\"City\" \r\n\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t<\/div>\r\n\t\t\t<div style=\"flex: 1;\">\r\n\t\t\t\t<input type=\"text\" id=\"state_${addressIndex}\" name=\"addresses[${addressIndex}][state]\" placeholder=\"State\" \r\n\t\t\t\t\t style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t<\/div>\r\n\t\t\t<div style=\"flex: 2;\">\r\n\t\t\t\t<input type=\"text\" id=\"postal_code_${addressIndex}\" name=\"addresses[${addressIndex}][postal_code]\" placeholder=\"Postal Code\"\r\n\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div style=\"width: 300px; margin-bottom: 15px;\">\r\n\t\t\t\t<input type=\"text\" id=\"country_${addressIndex}\" name=\"addresses[${addressIndex}][country]\" placeholder=\"Country\"\r\n\t\t\t\t\t   style=\"width: 100%; padding: 8px; box-sizing: border-box;\">\r\n\t\t\t<\/div><br>\r\n\t\t`;\r\n\t\tcontainer.appendChild(div);\r\n\t\taddressIndex++;\r\n\t}\r\n\r\n\tfunction removeAddress(index) {\r\n\t\tconst addressDiv = document.getElementById(`address_${index}`);\r\n\t\tif (addressDiv) {\r\n\t\t\taddressDiv.remove();\r\n\t\t}\r\n\t}\r\n\t\t\r\n\t\t\r\n\t\t\r\n\tfunction confirmDeletion(event, url) {\r\n\t\t\/\/ Ask for confirmation\r\n\t\tif (confirm('Are you sure you want to delete this item?')) {\r\n\t\t\t\/\/ Save the current scroll position\r\n\t\t\tconst scrollPos = window.scrollY;\r\n\r\n\t\t\t\/\/ Store the scroll position in sessionStorage\r\n\t\t\tsessionStorage.setItem('scrollPos', scrollPos);\r\n\r\n\t\t\t\/\/ Proceed with the deletion\r\n\t\t\twindow.location.href = url;\r\n\t\t} else {\r\n\t\t\t\/\/ Prevent the link from being followed\r\n\t\t\tevent.preventDefault();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n\t\/\/ Restore scroll position on page load\r\n\twindow.onload = function() {\r\n\t\tconst scrollPos = sessionStorage.getItem('scrollPos');\r\n\t\tif (scrollPos !== null) {\r\n\t\t\twindow.scrollTo(0, scrollPos);\r\n\t\t\tsessionStorage.removeItem('scrollPos'); \/\/ Clear the stored position\r\n\t\t}\r\n\t}\r\n\t\t\r\n\t\t\r\n<\/script>\r\n\r\n\r\n\r\n<?php\r\n\t\r\n\/\/ Display Formatted response array\r\n\/\/ fmcwpShowResponse($response);\r\n",
        "css": "\/* General Form Card Wrapper *\/\r\n.form-card {\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\r\n    max-width: 900px;\r\n    margin: 20px auto;\r\n    padding: 30px;\r\n    background-color: #ffffff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n    \/* --- MODIFICATION FOR BUTTONS --- *\/\r\n    position: relative; \/* Establishes a positioning context for the buttons *\/\r\n    padding-bottom: 80px; \/* Adds space at the bottom for the buttons *\/\r\n}\r\n\r\n\r\n\/* Form Sections and Input Fields *\/\r\n.form-section {\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.form-card label {\r\n    display: block;\r\n    font-weight: 600;\r\n    color: #333;\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.form-card input[type=\"text\"],\r\n.form-card input[type=\"email\"],\r\n.form-card select {\r\n    width: 100%;\r\n    padding: 10px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 4px;\r\n    box-sizing: border-box; \/* Important for consistent sizing *\/\r\n    font-size: 1em;\r\n}\r\n\r\n.form-card input:focus, .form-card select:focus {\r\n    border-color: #0073aa;\r\n    box-shadow: 0 0 0 1px #0073aa;\r\n    outline: none;\r\n}\r\n\r\n\r\n\/* Image Upload Section *\/\r\n.image-upload-section {\r\n    display: flex;\r\n    flex-direction: column; \/* Stack items vertically *\/\r\n    align-items: center; \/* Center items horizontally *\/\r\n    gap: 15px; \/* Adjust gap between elements *\/\r\n    margin-bottom: 30px;\r\n    padding-bottom: 30px;\r\n    border-bottom: 1px solid #eee;\r\n}\r\n\r\n.image-preview img {\r\n    width: 250px;\r\n    height: 250px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    border: 4px solid #f0f0f0;\r\n}\r\n\r\n\/* This makes the \"Choose Image\" button trigger the hidden file input *\/\r\n.choose-image {\r\n    position: relative;\r\n    overflow: hidden;\r\n    display: inline-block;\r\n}\r\n\r\n.choose-image .image-select {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    opacity: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    cursor: pointer;\r\n}\r\n\r\n\r\n\/* Re-used Button Styles for Consistency *\/\r\n.fm-button {\r\n    background-color: #0073aa;\r\n    color: white !important; \/* Use important to override link colors *\/\r\n    border: none;\r\n    padding: 10px 18px;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    transition: background-color 0.3s ease;\r\n}\r\n\r\n.fm-button:hover {\r\n    background-color: #005a87;\r\n}\r\n\r\n.delete-button {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 28px;\r\n    height: 28px;\r\n    background-color: #d9534f;\r\n    color: white !important; \/* Use important to override link colors *\/\r\n    border-radius: 50%;\r\n    text-decoration: none;\r\n    font-weight: bold;\r\n    font-size: 16px;\r\n    transition: background-color 0.3s ease;\r\n}\r\n\r\n.delete-button:hover {\r\n    background-color: #c9302c;\r\n    color: white;\r\n}\r\n\r\n\/* Clear\/Remove\/Cancel Buttons - secondary actions *\/\r\n.clear-button {\r\n    background-color: transparent;\r\n    color: #d9534f;\r\n    border: none;\r\n    text-decoration: none;\r\n    cursor: pointer;\r\n    font-weight: 600;\r\n}\r\n\r\n.clear-button:hover {\r\n    text-decoration: underline;\r\n}\r\n\r\n.cancel-button {\r\n    color: #555;\r\n}\r\n\r\n\/* Horizontal Rule Divider *\/\r\nhr {\r\n    border: 0;\r\n    height: 1px;\r\n    background-color: #ddd;\r\n    margin: 30px 0;\r\n}\r\n\r\n\r\n\/* --- NEW: CSS-Only Centered Buttons --- *\/\r\n\/* This positions the \"Save\" button to the left of the center point *\/\r\n.submit-section {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(calc(-100% - 10px)); \/* 10px is half the desired gap *\/\r\n}\r\n\r\n\/* This positions the \"Cancel\" link to the right of the center point *\/\r\n.cancel-section {\r\n    position: absolute;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(10px); \/* 10px is half the desired gap *\/\r\n}\r\n\r\n\/* Adjust the line-height of the cancel link to match the button *\/\r\n.cancel-section a {\r\n    line-height: 38px;\r\n}\r\n\r\n\r\n\/* Responsive design for smaller screens *\/\r\n@media (max-width: 768px) {\r\n    .form-card {\r\n        padding: 20px;\r\n    }\r\n}",
        "type": "Sample",
        "status": "1",
        "time": "2025-09-20 14:00:10",
        "modified_time": "2025-10-06 13:42:50",
        "description": "",
        "location": "frontend",
        "priority": "10"
    },
    {
        "id": "2",
        "name": "Contact Details",
        "shortcode": "[cwp-smpl-contact-details]",
        "code": "<?php\r\n\r\n\r\n\/\/ Set the connected pages refs\r\n$listPage = '\/contact-list\/';\r\n$detailPage = '\/contact-details\/';\r\n$addEditPage = '\/contact-add-edit\/';\r\n\r\n\r\n\/\/ Adjust for preview mode\r\nif(isset($_GET['fm_cwp_data_id'])){\r\n\t\r\n\/\/ Set snippet Ids for use in preview mode only \r\n$listId = $_GET['fm_cwp_data_id'] + 1 ;\r\n$detailId = $_GET['fm_cwp_data_id'] ;\r\n$addEditId = $_GET['fm_cwp_data_id'] - 1 ;\r\n\t\r\n$listPage = '?fm_cwp_data_id=' . $listId . '&';\r\n$detailPage = '?fm_cwp_data_id=' . $detailId . '&';\r\n$addEditPage = '?fm_cwp_data_id=' . $addEditId . '&';\t\r\n\t\r\n}else{\r\n\t\r\n$listPage = $listPage . '?';\r\n$detailPage = $detailPage . '?';\r\n$addEditPage = $addEditPage . '?';\r\n\t\r\n}\r\n\r\n$defaultImage = '..\/wp-content\/plugins\/cwp-snippets\/assets\/images\/profile-placeholder.jpg';\r\n\r\n$error = '';\r\n$message='';\r\n\r\n\/\/ Check that record id has been submitted\r\nif(!isset($_GET['recordId']) || empty($_GET['recordId'])){\r\n\t\r\n\t$error = 1;\r\n\t$message='Record ID is missing. Please start from the list view and click \"Details\" to view the Contact Card!';\r\n\t\r\n}\r\n\r\nif(!$error){\r\n\t\r\n\t\/\/ fmCWP( host.domain, database, layout, user, password)\r\n\t\/\/ $fm = new fmCWP(FM_HOST, FM_DATABASE, FM_LAYOUT, FM_USER, FM_PASSWORD);\r\n\r\n\t$fm = new fmCWP(FM_HOST_DEMO, FM_DATABASE_DEMO, FM_LAYOUT_DEMO, FM_USER_DEMO, FM_PASSWORD_DEMO);\r\n\r\n\t\/\/ Set Record id\r\n\t$recordId = sanitize_text_field(wp_unslash($_GET['recordId']));\r\n\r\n\t\/\/ Get record by id with applied parameters\r\n\t$result = $fm->getRecord($recordId);\r\n\r\n\t\/\/ Capture error\r\n\t$error = $fm->isError($result) ;\r\n\r\n\t\/\/ Capture Response Array\r\n\t$response = $fm->getResponse($result);\r\n\r\n\t\/\/ If error, display error message\r\n\tif ( $error ){ \r\n\t\t$message = 'Error!!'; \r\n\t}\r\n\t\r\n\t\/\/ Display Error Message\r\n\tif($error){\r\n\r\n\t\tif(isset($response)){\t\t\r\n\t\t\tif ( is_array($response)){\r\n\t\t\t\t$message = 'Error!! ' . $response['messages'][0]['message'];\r\n\t\t\t}else{\r\n\t\t\t\t$message = 'Error!! ' . $response;\r\n\t\t\t}\t\r\n\t\t}\r\n\r\n\t}\r\n\r\n}\r\n\r\n?>\r\n<div style=\"margin: 50px 0 100px 0;\">\r\n<?php\r\nif ($error){ cwpErrorMessage($message); }\t\r\nif ( !$error ){\r\n\t\r\n\t$recordId = $response['response']['data'][0]['recordId'];\r\n\t$contact = $response['response']['data'][0]['fieldData'];\r\n\t\r\n\t\/\/ Use Base64 or container urls based on the Base64 switch in the CWP Snippets Demo database. It is seet to use Base64 by default\r\n\t\/\/ If images do not display when using container data urls please refer to the documentation for instructions on how to turn on persistant urls on your server\r\n\t$useBase64 = isset ( $contact['Settings::Base64'] ) ? $contact['Settings::Base64'] : true  ;\r\n\t\r\n\tif(empty($contact['Photo'])){\r\n\t\t$imgsrc = $defaultImage ;\r\n\t}else{\r\n\t\t$imgsrc = $useBase64 ? 'data:image\/' . $contact['Photo'] . ';base64,' . $contact['cPhotoBase64'] : $contact['Photo'] ;\r\n\t}\r\n\t\r\n\t\r\n\t\r\n\t?>\r\n\r\n\r\n<!-- Wrapper Container -->\r\n<div class=\"contact-card-wrapper\">\r\n\r\n    <!-- Back and Edit Buttons -->\r\n    <div class=\"button-group\">\r\n        <button class=\"fm-button\"><a href=\"<?php echo $listPage ?>\">Back To List<\/a><\/button>\r\n        <button class=\"fm-button\"><a href=\"<?php echo $addEditPage . 'recordId=' . $recordId; ?>\">Edit<\/a><\/button>\r\n    <\/div>\r\n\r\n    <!-- Contact Card -->\r\n    <div class=\"contact-card\">\r\n\r\n        <!-- Profile Picture Left -->\r\n        <div class=\"profile-picture\">\r\n            <img src=\"<?php echo $imgsrc ; ?>\" alt=\"Profile Picture\">\r\n        <\/div>\r\n\r\n        <!-- Contact Details Right -->\r\n        <div class=\"contact-details\">\r\n\r\n            <!-- Contact Table Data -->\r\n            <h2><?php echo $contact['First Name'] . ' ' . $contact['Last Name'] ; ?><\/h2>\r\n            <p><label>Job Title: <\/label>  <?php echo $contact['Job Title'] ; ?><\/p>\r\n            <p><label>Company: <\/label>  <?php echo $contact['Company'] ; ?><\/p>\r\n            <p><label>Website: <\/label>  <?php echo $contact['Website'] ; ?><\/p>\r\n\r\n            <!-- Email Portal -->\r\n            <hr>\r\n            <p><strong>Email:<\/strong><\/p>\r\n            <?php\r\n                $emails = $response['response']['data'][0]['portalData']['Email Addresses'] ;\t\r\n                foreach( $emails as $email ){\r\n                    echo '<label>' . $email['Email Addresses::Type'] . ':<\/label> ' . $email['Email Addresses::Address'] . '<br>';\r\n                }\r\n            ?>\r\n\r\n            <!-- Phone Portal -->\r\n            <hr>\r\n            <p><strong>Phone:<\/strong><\/p>\r\n            <?php\r\n                $phones = $response['response']['data'][0]['portalData']['Phone Numbers'] ;\t\r\n                foreach( $phones as $phone ){\r\n                    echo '<label>' . $phone['Phone Numbers::Type'] . ':<\/label> ' . $phone['Phone Numbers::Number'] . '<br>';\r\n                }\r\n            ?>\t\t\t\t\r\n\r\n            <!-- Address Portal -->\r\n            <hr>\r\n            <p><strong>Address:<\/strong><\/p>\r\n            <?php\r\n                $addresses = $response['response']['data'][0]['portalData']['Addresses'] ;\t\r\n                foreach( $addresses as $address ){\r\n                    echo $address['Addresses::Type'] . ':<br>';\r\n                    echo $address['Addresses::Address Line 1'] . ' ' . $address['Addresses::Address Line 2'] . '<br>';\r\n                    echo $address['Addresses::City'] . ', ' . $address['Addresses::State'] . ' ' . $address['Addresses::Postal Code'] . '<br>';\r\n                    echo $address['Addresses::Country'] . '<br><br>';\r\n                }\r\n            ?>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\t\r\n\t<?php\r\n\r\n}\r\n\r\n\r\n?>\t\r\n<\/div>\r\n<?php\r\n\t\r\n\r\n\r\n\r\n\/\/ Display Formatted response array\r\n\/\/ fmcwpShowResponse($response);",
        "css": "\/* Wrapper for the entire component *\/\r\n.contact-card-wrapper {\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\r\n    max-width: 900px;\r\n    margin: 20px auto;\r\n    padding: 20px;\r\n}\r\n\r\n\/* Button Group at the top (Back\/Edit) *\/\r\n.button-group {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n\/* Re-using the button style from the previous page for consistency *\/\r\n.fm-button {\r\n    background-color: #0073aa;\r\n    color: white;\r\n    border: none;\r\n    padding: 10px 18px; \/* Slightly larger for primary actions *\/\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    text-align: center;\r\n    transition: background-color 0.3s ease;\r\n}\r\n\r\n.fm-button:hover {\r\n    background-color: #005a87;\r\n}\r\n\r\n.fm-button a {\r\n    color: white;\r\n    text-decoration: none;\r\n    display: block;\r\n}\r\n\r\n\/* The main contact card *\/\r\n.contact-card {\r\n    display: flex;\r\n    gap: 30px;\r\n    background-color: #ffffff;\r\n    padding: 30px;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n}\r\n\r\n\/* Left side: Profile Picture *\/\r\n.profile-picture {\r\n    flex: 0 0 180px; \/* Don't grow, don't shrink, base width 180px *\/\r\n    text-align: center;\r\n}\r\n\r\n.profile-picture img {\r\n    width: 180px;\r\n    height: 180px;\r\n    border-radius: 50%; \/* Circular image *\/\r\n    object-fit: cover;\r\n    border: 4px solid #f0f0f0;\r\n}\r\n\r\n\/* Right side: Contact Information *\/\r\n.contact-details {\r\n    flex: 1; \/* Grow to fill the remaining space *\/\r\n}\r\n\r\n.contact-details h2 {\r\n    margin-top: 0;\r\n    margin-bottom: 15px;\r\n    font-size: 2.2em;\r\n    color: #23282d;\r\n    border-bottom: 2px solid #f0f0f0;\r\n    padding-bottom: 10px;\r\n}\r\n\r\n.contact-details p {\r\n    margin: 8px 0;\r\n    font-size: 1em;\r\n    line-height: 1.6;\r\n    color: #555;\r\n}\r\n\r\n\/* Styling for data labels to make them distinct *\/\r\n.contact-details label, .contact-details strong {\r\n    font-weight: 600;\r\n    color: #333;\r\n    margin-right: 5px;\r\n}\r\n\r\n\/* Horizontal rule for section breaks *\/\r\n.contact-details hr {\r\n    border: 0;\r\n    height: 1px;\r\n    background-color: #ddd;\r\n    margin: 20px 0;\r\n}\r\n\r\n\/* Responsive design for mobile devices *\/\r\n@media (max-width: 768px) {\r\n    .contact-card {\r\n        flex-direction: column;\r\n        align-items: center;\r\n        padding: 20px;\r\n    }\r\n\r\n    .profile-picture {\r\n        flex-basis: auto; \/* Reset flex basis *\/\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .profile-picture img {\r\n        width: 150px;\r\n        height: 150px;\r\n    }\r\n\r\n    .contact-details {\r\n        text-align: center;\r\n    }\r\n\r\n    .contact-details h2 {\r\n        font-size: 1.8em;\r\n    }\r\n}",
        "type": "Sample",
        "status": "1",
        "time": "2025-09-20 14:00:10",
        "modified_time": "2025-10-06 13:46:17",
        "description": "",
        "location": "frontend",
        "priority": "10"
    },
    {
        "id": "3",
        "name": "Contact List",
        "shortcode": "[cwp-smpl-contact-list]",
        "code": "<?php\r\n\r\n\/\/ Set the connected pages refs\r\n$listPage = '\/contact-list\/';\r\n$detailPage = '\/contact-details\/';\r\n$addEditPage = '\/contact-add-edit\/';\r\n\r\n\/\/ Adjust for preview mode\r\nif(isset($_GET['fm_cwp_data_id'])){\r\n\t\r\n\/\/ Set snippet Ids for use in preview mode only \r\n$listId = $_GET['fm_cwp_data_id'];\r\n$detailId = $_GET['fm_cwp_data_id'] - 1 ;\r\n$addEditId = $_GET['fm_cwp_data_id'] - 2 ;\r\n\t\r\n$listPage = '?fm_cwp_data_id=' . $listId . '&';\r\n$detailPage = '?fm_cwp_data_id=' . $detailId . '&';\r\n$addEditPage = '?fm_cwp_data_id=' . $addEditId . '&';\t\r\n\t\r\n}else{\r\n\t\r\n$listPage = $listPage . '?';\r\n$detailPage = $detailPage . '?';\r\n$addEditPage = $addEditPage . '?';\r\n\t\r\n}\r\n\r\n$defaultImage = '..\/wp-content\/plugins\/cwp-snippets\/assets\/images\/profile-placeholder.jpg';\r\n\r\n\r\n\/\/ fmCWP( host.domain, database, layout, user, password)\r\n\/\/ $fm = new fmCWP(FM_HOST, FM_DATABASE, FM_LAYOUT, FM_USER, FM_PASSWORD);\r\n\r\n$fm = new fmCWP(FM_HOST_DEMO, FM_DATABASE_DEMO, FM_LAYOUT_DEMO, FM_USER_DEMO, FM_PASSWORD_DEMO);\r\n\r\n\/\/ Delete Row\r\nif(isset($_GET['delete'])){ \r\n\r\n\t\/\/ Set the record Id\r\n\t$recordId = isset($_GET['recordId']) ? sanitize_text_field(wp_unslash($_GET['recordId'])) : '' ;\r\n\r\n\t\/\/ Delete record\r\n\t$result = $fm->deleteRecord($recordId);\r\n\r\n\t\/\/ Capture error\r\n\t$deleteError = $fm->isError($result) ;\r\n\t\r\n\tif( $deleteError ){\r\n\t\tcwpErrorMessage( $fm->getResponse($result) );\r\n\t}\r\n\r\n}\r\n\r\n\/\/ Set Start and Search from session or get\r\nif ( isset($_GET[\"start\"]) ) { $start = sanitize_text_field(wp_unslash($_GET[\"start\"])); }else{ $start = 1; }\r\nif (isset($_GET[\"search\"])){ $search = sanitize_text_field(wp_unslash($_GET[\"search\"])) ; }else{ $search = \"\" ;}\r\n$search = empty($search) ? '*' : $search ;\r\n\r\n\r\n\/\/ Set limit\r\n$limit = 10;\r\n$end = $start + $limit - 1 ;\r\n\r\n\/\/ Used to change layout if different specified when making the connection\r\n$fm->setFilemakerLayout(\"Contact List\");\r\n\r\n\t\t\t\t\t\t\t\t\t\r\n\/\/ Setting up parameters for find record\r\n$params = [\r\n\r\n    \/\/ Build the find\r\n    \"query\" => [\r\n        [ \"First Name\" => $search ],\r\n        \/\/ New Request\r\n        [ \"Last Name\" => $search ],\r\n        \/\/ New Request\r\n        [ \"Company\" => $search ],\r\n        \/\/ New Request\r\n        [ \"Addresses::City\" => $search ]\r\n    ],\r\n\r\n    \/\/ Number of records to return starting at\r\n    \"limit\"=>$limit,\r\n    \"offset\"=>$start,\r\n\r\n    \/\/ Sort The Records\r\n    \"sort\" => [\r\n        [\r\n            \"fieldName\" => \"Last Name\", \"sortOrder\" => \"ascend\"\r\n        ],\r\n    ]\r\n];\r\n\r\n\r\n\/\/ Get records and apply parameters\r\n$result = $fm->findRecords($params);\r\n\r\n\/\/ Capture error\r\n$error = $fm->isError($result) ;\r\n\r\n\/\/ Capture Response Array\r\n$response = $fm->getResponse($result);\r\n\r\n\/\/ Set search and record navigation\r\nif(!$error){\r\n\r\n$search = $search == '*' ? '' : $search ;\r\n$found = $response['response']['dataInfo']['foundCount'] ;\r\n$returned = $response['response']['dataInfo']['returnedCount'] ;\r\n$through = $start + ( $returned - 1 ) ;\r\n$next = $start + $limit > $found ? $start : $start + $limit ;\r\n$prev = $start == 1 ? 1 : $start - $limit ;\r\n\t\r\n?>\r\n\r\n<div class=\"container\">\r\n\t\r\n\t<!-- Header Section -->\r\n\t<div class=\"header-section\">\r\n\t\t\r\n\t\t<!-- Search Section -->\r\n\t\t<div class=\"search-section\">\r\n\t\t\t<form action=\"\" method=\"GET\" style=\"display: flex; align-items: center;\">\r\n\t\t\t\t<?php if(isset($listId)){ echo '<input type=\"hidden\" name=\"fm_cwp_data_id\" value=\"' . $listId . '\">'; } ?>\r\n\t\t\t\t<input type=\"text\" name=\"search\" value=\"<?php echo $search; ?>\" placeholder=\"Search...\" class=\"search-input\">\r\n\t\t\t\t<input type=\"submit\" value=\"Search\" class=\"fm-button\">\r\n\t\t\t\t<button type=\"button\" class=\"fm-button\"><a href=\"<?php echo $listPage; ?>clear=1\">Clear<\/a><\/button>\r\n\t\t\t<\/form> \r\n\t\t\t\r\n        <\/div>\r\n\t\t\r\n\t\t<!-- Record Navigation -->\r\n\t\t<div class=\"record-navigation\">\r\n\t\t\t<a href=\"<?php echo $listPage . 'search=' . $search . '&start=' . $prev; ?>\" class=\"nav-button\">&#x23f4;<\/a>\r\n\t\t\t<b><?php echo $start; ?><\/b>  through  <b><?php echo $through; ?><\/b>  of  <b><?php echo $found; ?><\/b>\r\n\t\t\t<a href=\"<?php echo $listPage . 'search=' . $search . '&start=' . $next; ?>\" class=\"nav-button\">&#x23f5;<\/a>\r\n\t\t<\/div>\r\n\t\t\r\n\t\t<!-- New Contact Button -->\r\n\t\t<button class=\"fm-button\"><a href=\"<?php echo $addEditPage; ?>\">New Contact<\/a><\/button>\r\n\t\t\r\n\t<\/div>\r\n\t\r\n\t<!-- Start Record List table -->\r\n    <table class=\"record-table\">\r\n        <thead>\r\n            <tr class=\"table-header\">\r\n                <th class=\"column-header\" style=\"width: 50px;\"><\/th>\r\n                <th class=\"column-header\">Name<\/th>\r\n                <th class=\"column-header\">Company<\/th>\r\n                <th class=\"column-header\">City<\/th>\r\n                <th class=\"column-header\">State<\/th>\r\n                <th class=\"column-header\">Country<\/th>\r\n                <th class=\"column-header\" style=\"width: 75px;\"><\/th>\r\n\t\t\t\t<th class=\"column-header\" style=\"width: 50px;\"><\/th>\r\n            <\/tr>\r\n        <\/thead>\r\n        <tbody>\r\n\t\t\t\r\n<?php\r\n\/\/ Get the contact data array\r\n$records = $response['response']['data'] ;\r\n\r\n\/\/ Loop through and display contacts\r\nforeach ($records as $record) {\r\n\t\r\n\t\/\/ Use Base64 or container urls based on the Base64 switch in the CWP Snippets Demo database. It is seet to use Base64 by default\r\n\t\/\/ If images do not display when using container data urls please refer to the documentation for instructions on how to turn on persistant urls on your server\r\n\t$useBase64 = isset ( $record['fieldData']['Settings::Base64'] ) ? $record['fieldData']['Settings::Base64'] : true  ;\r\n\t\r\n\tif(empty($record['fieldData']['Photo'])){\r\n\t\t$imgsrc = $defaultImage ;\r\n\t}else{\r\n\t\t$imgsrc = $useBase64 ? 'data:image\/' . $record['fieldData']['photoType'] . ';base64,' . $record['fieldData']['cPhotoBase64'] : $record['fieldData']['Photo'] ;\r\n\t}\r\n\t\r\n?>\r\n\t\t\t\r\n\t\t\t<!-- table row -->\r\n            <tr class=\"data-row\">\r\n                <td class=\"image-cell\">\r\n\t\t\t\t\t<div class=\"image-container\">\r\n\t\t\t\t\t\t<img src=\"<?php echo $imgsrc; ?>\" alt=\"Profile Picture\">\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/td>                \r\n                <td class=\"data-cell\"><?php echo $record['fieldData']['First Name'] . ' ' . $record['fieldData']['Last Name']; ?><\/td>\r\n                <td class=\"data-cell\"><?php echo $record['fieldData']['Company']; ?><\/td>\r\n                <td class=\"data-cell\"><?php echo $record['fieldData']['Addresses::City']; ?><\/td>\r\n                <td class=\"data-cell\"><?php echo $record['fieldData']['Addresses::State']; ?><\/td>\r\n                <td class=\"data-cell\"><?php echo $record['fieldData']['Addresses::Country']; ?><\/td>\r\n                <td class=\"data-cell\" style=\"text-align: center;\">\r\n\t\t\t\t\t<button class=\"fm-button\"><a href=\"<?php echo $detailPage . 'recordId=' . $record['recordId']; ?>\">Details<\/a><\/button>\r\n                <\/td>\r\n\t\t\t\t<td class=\"data-cell\" style=\"text-align: center;\">\r\n\t\t\t\t\t<a href=\"<?php echo $listPage . '&delete=contact&recordId=' . $record['recordId']; ?>\" \r\n\t\t\t\t\t   onclick=\"return confirmDeletion(event, this.href);\" \r\n\t\t\t\t\t   class=\"delete-button\">X<\/a>\r\n\t\t\t\t<\/td>\r\n            <\/tr>\r\n\t\t\t\t\r\n<?php\t\t\t\t\r\n}\r\n?>\r\n\t\t\t\r\n\t\t<\/tbody>\r\n    <\/table>\r\n\t\r\n<\/div>\r\n\r\n\r\n\r\n\r\n<?php\r\n\r\n}\r\n\r\n?>\r\n\r\n<script>\r\n\t\r\n\t\tfunction confirmDeletion(event, url) {\r\n\t\t\/\/ Ask for confirmation\r\n\t\tif (confirm('Are you sure you want to delete this item?')) {\r\n\t\t\t\/\/ Save the current scroll position\r\n\t\t\tconst scrollPos = window.scrollY;\r\n\r\n\t\t\t\/\/ Store the scroll position in sessionStorage\r\n\t\t\tsessionStorage.setItem('scrollPos', scrollPos);\r\n\r\n\t\t\t\/\/ Proceed with the deletion\r\n\t\t\twindow.location.href = url;\r\n\t\t} else {\r\n\t\t\t\/\/ Prevent the link from being followed\r\n\t\t\tevent.preventDefault();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n\t\/\/ Restore scroll position on page load\r\n\twindow.onload = function() {\r\n\t\tconst scrollPos = sessionStorage.getItem('scrollPos');\r\n\t\tif (scrollPos !== null) {\r\n\t\t\twindow.scrollTo(0, scrollPos);\r\n\t\t\tsessionStorage.removeItem('scrollPos'); \/\/ Clear the stored position\r\n\t\t}\r\n\t}\r\n\t\r\n<\/script>\r\n\r\n<?php\r\n\t\r\n\/\/ Display Formatted response array\r\n\/\/ fmcwpShowResponse($response);\r\n\r\n",
        "css": "\/* General Body & Container Styles *\/\r\n.container {\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\r\n    max-width: 1140px;\r\n    margin: 20px auto;\r\n    padding: 20px;\r\n    background-color: #f9f9f9;\r\n    border-radius: 8px;\r\n    box-shadow: 0 4px 8px rgba(0,0,0,0.1);\r\n}\r\n\r\n\/* Header Section *\/\r\n.header-section {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 15px;\r\n    margin-bottom: 25px;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid #ddd;\r\n}\r\n\r\n\/* Search Section *\/\r\n.search-section .search-input {\r\n    padding: 8px 12px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 4px;\r\n    margin-right: 5px;\r\n    min-width: 200px;\r\n}\r\n\r\n\/* General Button Styles *\/\r\n.fm-button {\r\n    background-color: #0073aa; \/* A common WordPress blue *\/\r\n    color: white;\r\n    border: none;\r\n    padding: 8px 15px;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n    text-align: center;\r\n    transition: background-color 0.3s ease;\r\n}\r\n\r\n.fm-button:hover {\r\n    background-color: #005a87;\r\n}\r\n\r\n\/* Ensure links inside buttons are styled correctly *\/\r\n.fm-button a {\r\n    color: white;\r\n    text-decoration: none;\r\n    display: block;\r\n}\r\n\r\n\r\n\/* Record Navigation *\/\r\n.record-navigation {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 14px;\r\n}\r\n\r\n.nav-button {\r\n    font-size: 24px; \/* Makes the arrow icons larger *\/\r\n    color: #0073aa;\r\n    text-decoration: none;\r\n    line-height: 1;\r\n}\r\n\r\n.nav-button:hover {\r\n    color: #005a87;\r\n}\r\n\r\n\r\n\/* Table Styles *\/\r\n.record-table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    background-color: #fff;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.05);\r\n}\r\n\r\n\/* Table Header *\/\r\n.table-header {\r\n    background-color: #f1f1f1;\r\n    border-bottom: 2px solid #ddd;\r\n}\r\n\r\n.column-header {\r\n    padding: 12px 15px;\r\n    text-align: left;\r\n    font-weight: 600;\r\n    color: #333;\r\n}\r\n\r\n\/* Table Data Rows and Cells *\/\r\n.data-row:nth-child(even) {\r\n    background-color: #f9f9f9;\r\n}\r\n\r\n.data-row:hover {\r\n    background-color: #f0f6fa;\r\n}\r\n\r\n.data-cell, .image-cell {\r\n    padding: 10px 15px;\r\n    vertical-align: middle;\r\n    border-top: 1px solid #eee;\r\n}\r\n\r\n\/* Profile Image *\/\r\n.image-container {\r\n    width: 50px;\r\n    height: 50px;\r\n    border-radius: 50%;\r\n    overflow: hidden;\r\n    background-color: #e0e0e0;\r\n}\r\n\r\n.image-container img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n\r\n\/* Delete Button 'X' *\/\r\n.delete-button {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 28px;\r\n    height: 28px;\r\n    background-color: #d9534f;\r\n    color: white;\r\n    border-radius: 50%;\r\n    text-decoration: none;\r\n    font-weight: bold;\r\n    font-size: 16px;\r\n    transition: background-color 0.3s ease;\r\n}\r\n\r\n.delete-button:hover {\r\n    background-color: #c9302c;\r\n    color: white;\r\n}\r\n\r\n\r\n\/* Responsive Design for smaller screens *\/\r\n@media (max-width: 768px) {\r\n    .header-section {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n    }\r\n\r\n    .record-table, .column-header, .data-cell {\r\n        font-size: 14px;\r\n    }\r\n\r\n    .column-header, .data-cell {\r\n        padding: 8px;\r\n    }\r\n\r\n    .image-container {\r\n        width: 40px;\r\n        height: 40px;\r\n    }\r\n}",
        "type": "Sample",
        "status": "1",
        "time": "2025-09-20 14:00:10",
        "modified_time": "2025-10-06 13:39:26",
        "description": "",
        "location": "frontend",
        "priority": "10"
    }
]