File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>/**
 * External dependencies
 */
import styled from &#039;@emotion/styled&#039;;

/**
 * WordPress components that create the necessary UI elements for the block
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-components/
 */
import {registerBlockType} from &#039;@wordpress/blocks&#039;;
import {__} from &#039;@wordpress/i18n&#039;;
import {
  TextControl,
  Button,
  SelectControl,
  ToggleControl,
  FontSizePicker,
  ColorIndicator,
  Dropdown,
  DropdownContentWrapper,
  ColorPalette,
  Flex,
  FlexBlock,
  __experimentalGrid as Grid,
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOption as ToggleGroupControlOption
} from &#039;@wordpress/components&#039;;

import {
  __experimentalBoxControl as BoxControl,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem,
  __experimentalUnitControl as UnitControl,
} from &#039;@wordpress/components&#039;;

import {Panel, PanelBody, PanelRow} from &#039;@wordpress/components&#039;;
import {useState} from &#039;@wordpress/element&#039;;


/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import {
  useBlockProps,
  InspectorControls,
} from &#039;@wordpress/block-editor&#039;;

const LatepointBookFormWrapper = styled.div`
  display: flex;
  justify-content: space-around;
`;

const LatepointBookForm = styled.div`
  display: flex;
  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.1);
  border-radius: 4px;
  border: 1px solid #ddd;
  border-bottom-color: #bbb;
  background-color: #fff;
  flex: 0;
`;

const SidePanel = styled.div`
  flex: 0 0 180px;
  width: 180px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  border-right: 1px solid #eee;
`;

const StepSideImage = styled.div`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eee;
  margin: 0px auto;
`;

const StepSideContent = styled.div`
`;

const StepSideName = styled.div`
  padding: 10px;
  border-radius: 4px;
  background-color: #eee;
  margin-bottom: 10px;
`;

const StepSideDescription = styled.div`
  padding: 20px;
  border-radius: 4px;
  background-color: #f8f8f8;
  margin-bottom: 20px;
`;

const StepSideExtra = styled.div`
  padding: 10px;
  border-radius: 4px;
  background-color: #f8f8f8;
`;


const MainPanel = styled.div`
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 400px;
`;
const StepMainName = styled.div`
  padding: 10px;
  border-radius: 4px;
  background-color: #eee;
`;
const StepContent = styled.div`
  display: flex;
  gap: 20px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  margin-bottom: auto;
`;

const StepContentTile = styled.div`
  padding: 40px;
  border-radius: 4px;
  background-color: #f8f8f8;
  flex: 1;
`;

const StepButtons = styled.div`
  margin-top: auto;
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
`;

const StepButtonPrev = styled.div`
  padding: 10px 25px;
  background-color: #eee;
  border-radius: 4px;
`;

const StepButtonNext = styled.div`
  padding: 10px 25px;
  background-color: #b4c6f5;
  border-radius: 4px;
`;

const SummaryPanel = styled.div`
  flex: 0 0 180px;
  width: 180px;
  border-left: 1px solid #eee;
  padding: 20px;
  display: flex;
  flex-direction: column;
`;

const SummaryHeading = styled.div`
  padding: 10px;
  border-radius: 4px;
  background-color: #eee;
`;

const SummaryContent = styled.div`
  border-top: 1px solid #eee;
  margin-top: 15px;
  padding-top: 15px;
`;
const SummaryTile = styled.div`
  padding: 5px;
  border-radius: 4px;
  background-color: #f8f8f8;
  margin-bottom: 10px;
`;
const SummaryFoot = styled.div`
  margin-top: auto;
  border-top: 1px solid #eee;
  padding-top: 15px;
`;
const SummaryTotal = styled.div`
  padding: 10px;
  border-radius: 4px;
  background-color: #eee;
`;


const ColorAttributesWrapper = styled.div`
  margin-bottom: 15px;
  border: 1px solid #eee;
`;

const PanelRowBlock = styled(PanelRow)`
  display:block;
  margin-bottom: 20px;
`;

const SingleColumnItem = styled(ToolsPanelItem)`
    grid-column: span 1;
`;


/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @param {Object}   props               Properties passed to the function.
 * @param {Object}   props.attributes    Available block attributes.
 * @param {Function} props.setAttributes Function that updates individual attributes.
 *
 * @return {WPElement} Element to render.
 */
export default function Edit({attributes, setAttributes}) {
  const blockProps = useBlockProps();

  const colors = [
    {
      &quot;name&quot;: &quot;Black&quot;,
      &quot;color&quot;: &quot;#000000&quot;
    },
    {
      &quot;name&quot;: &quot;White&quot;,
      &quot;color&quot;: &quot;#ffffff&quot;
    },
    {
      &quot;name&quot;: &quot;Blue&quot;,
      &quot;color&quot;: &quot;#5376ea&quot;
    }
  ]

  const renderTextColorPicker = () =&gt; (
    &lt;ColorPalette
      value={attributes.text_color}
      colors={colors}
      onChange={(color) =&gt; setAttributes({text_color: color})}
    /&gt;
  );

  const renderBgColorPicker = () =&gt; (
    &lt;ColorPalette
      value={attributes.bg_color}
      colors={colors}
      onChange={(color) =&gt; setAttributes({bg_color: color})}
    /&gt;
  );

  const generateStyles = () =&gt; {
    let styles = {}
    if (attributes.border_radius) styles.borderRadius = attributes.border_radius
    if (attributes.bg_color) styles.backgroundColor = attributes.bg_color
    if (attributes.text_color) styles.color = attributes.text_color
    if (attributes.font_size) styles.fontSize = attributes.font_size
    return styles
  }


  return (
    &lt;div {...blockProps}&gt;
      &lt;InspectorControls&gt;
        &lt;Panel&gt;
          &lt;PanelBody title=&quot;Booking Form Settings&quot;&gt;
              &lt;ToggleControl
                label=&quot;Hide Summary Panel&quot;
                checked={attributes.hide_summary}
                onChange={(value) =&gt; setAttributes({hide_summary: value})}
              /&gt;
              &lt;ToggleControl
                label=&quot;Hide Side Panel&quot;
                checked={attributes.hide_side_panel}
                onChange={(value) =&gt; setAttributes({hide_side_panel: value})}
              /&gt;
          &lt;/PanelBody&gt;
        &lt;/Panel&gt;
        &lt;Panel&gt;
          &lt;PanelBody title=&quot;Step Settings&quot; initialOpen={false}&gt;
            &lt;SelectControl
                label={__(&#039;Preselected Agent&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_agent}
                onChange={(value) =&gt; setAttributes({selected_agent: value})}
                options={latepoint_helper.selected_agents_options}
            /&gt;
            &lt;SelectControl
                label={__(&#039;Preselected Service&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_service}
                onChange={(value) =&gt; setAttributes({selected_service: value})}
                options={latepoint_helper.selected_services_options}
            /&gt;
            &lt;SelectControl
                label={__(&#039;Preselected Service Category&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_service_category}
                onChange={(value) =&gt; setAttributes({selected_service_category: value})}
                options={latepoint_helper.selected_service_categories_options}
            /&gt;
            &lt;SelectControl
                label={__(&#039;Preselected Location&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_location}
                onChange={(value) =&gt; setAttributes({selected_location: value})}
                options={latepoint_helper.selected_locations_options}
            /&gt;
            &lt;TextControl
                label={__(&#039;Preselected Booking Start Date&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_start_date || &#039;&#039;}
                placeholder=&quot;YYYY-MM-DD&quot;
                onChange={(value) =&gt; setAttributes({selected_start_date: value})}
            /&gt;
            &lt;TextControl
                label={__(&#039;Preselected Booking Start Time&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_start_time || &#039;&#039;}
                placeholder=&quot;Minutes&quot;
                onChange={(value) =&gt; setAttributes({selected_start_time: value})}
            /&gt;
            &lt;TextControl
                label={__(&#039;Preselected Duration&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_duration || &#039;&#039;}
                placeholder=&quot;Minutes&quot;
                onChange={(value) =&gt; setAttributes({selected_duration: value})}
            /&gt;
            &lt;TextControl
                label={__(&#039;Preselected Total Attendees&#039;, &#039;latepoint&#039;)}
                value={attributes.selected_total_attendees || &#039;&#039;}
                placeholder=&quot;Number&quot;
                onChange={(value) =&gt; setAttributes({selected_total_attendees: value})}
            /&gt;
          &lt;/PanelBody&gt;
        &lt;/Panel&gt;
        &lt;Panel&gt;
          &lt;PanelBody title=&quot;Other Settings&quot; initialOpen={false}&gt;
            &lt;TextControl
                label=&quot;Source ID&quot;
                value={attributes.source_id || &#039;&#039;}
                onChange={(value) =&gt; setAttributes({source_id: value})}
            /&gt;
            &lt;TextControl
                label=&quot;Calendar Start Date&quot;
                value={attributes.calendar_start_date || &#039;&#039;}
                placeholder=&quot;YYYY-MM-DD&quot;
                onChange={(value) =&gt; setAttributes({calendar_start_date: value})}
            /&gt;
            &lt;TextControl
                label=&quot;Show Services&quot;
                placeholder=&quot;Comma separated service IDs&quot;
                value={attributes.show_services || &#039;&#039;}
                onChange={(value) =&gt; setAttributes({show_services: value})}
            /&gt;
            &lt;TextControl
                label=&quot;Show Service Categories&quot;
                placeholder=&quot;Comma separated category IDs&quot;
                value={attributes.show_service_categories || &#039;&#039;}
                onChange={(value) =&gt; setAttributes({show_service_categories: value})}
            /&gt;
            &lt;TextControl
                label=&quot;Show Agents&quot;
                placeholder=&quot;Comma separated agent IDs&quot;
                value={attributes.show_agents || &#039;&#039;}
                onChange={(value) =&gt; setAttributes({show_agents: value})}
            /&gt;
            &lt;TextControl
                label=&quot;Show Locations&quot;
                placeholder=&quot;Comma separated location IDs&quot;
                value={attributes.show_locations || &#039;&#039;}
                onChange={(value) =&gt; setAttributes({show_locations: value})}
            /&gt;
          &lt;/PanelBody&gt;
        &lt;/Panel&gt;
      &lt;/InspectorControls&gt;
      &lt;LatepointBookFormWrapper&gt;
        &lt;LatepointBookForm style={generateStyles()}&gt;
          {!attributes.hide_side_panel &amp;&amp; &lt;SidePanel&gt;
            &lt;StepSideImage&gt;&lt;/StepSideImage&gt;
            &lt;StepSideContent&gt;
              &lt;StepSideName&gt;&lt;/StepSideName&gt;
              &lt;StepSideDescription&gt;&lt;/StepSideDescription&gt;
            &lt;/StepSideContent&gt;
            &lt;StepSideExtra&gt;&lt;/StepSideExtra&gt;
          &lt;/SidePanel&gt;}
          &lt;MainPanel&gt;
            &lt;StepMainName&gt;&lt;/StepMainName&gt;
            &lt;StepContent&gt;
              &lt;StepContentTile&gt;&lt;/StepContentTile&gt;
              &lt;StepContentTile&gt;&lt;/StepContentTile&gt;
              &lt;StepContentTile&gt;&lt;/StepContentTile&gt;
            &lt;/StepContent&gt;
            &lt;StepButtons&gt;
              &lt;StepButtonPrev&gt;&lt;/StepButtonPrev&gt;
              &lt;StepButtonNext&gt;&lt;/StepButtonNext&gt;
            &lt;/StepButtons&gt;
          &lt;/MainPanel&gt;
          {!attributes.hide_summary &amp;&amp; &lt;SummaryPanel&gt;
            &lt;SummaryHeading&gt;&lt;/SummaryHeading&gt;
            &lt;SummaryContent&gt;
              &lt;SummaryTile&gt;&lt;/SummaryTile&gt;
              &lt;SummaryTile&gt;&lt;/SummaryTile&gt;
              &lt;SummaryTile&gt;&lt;/SummaryTile&gt;
              &lt;SummaryTile&gt;&lt;/SummaryTile&gt;
            &lt;/SummaryContent&gt;
            &lt;SummaryFoot&gt;
              &lt;SummaryTotal&gt;&lt;/SummaryTotal&gt;
            &lt;/SummaryFoot&gt;
          &lt;/SummaryPanel&gt;}
        &lt;/LatepointBookForm&gt;
      &lt;/LatepointBookFormWrapper&gt;
    &lt;/div&gt;
  );
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>