add_filter( 'voxel/field-types', function( $fields ) {
	class Raw_Code_Custom_Field extends \Voxel\Post_Types\Fields\Base_Post_Field {
		protected $props = [
			'type' => 'raw-code',
			'label' => 'Raw code',
		];

		public function get_models(): array {
			return [
				'label' => $this->get_label_model(),
				'key' => $this->get_key_model(),
			];
		}

		public function sanitize( $value ) {
			if ( current_user_can('administrator') ) {
				return $value;
			}

			return null;
		}

		public function update( $value ): void {
			if ( current_user_can('administrator') ) {
				if ( $this->is_empty( $value ) ) {
					delete_post_meta( $this->post->get_id(), $this->get_key() );
				} else {
					update_post_meta( $this->post->get_id(), $this->get_key(), wp_slash( $value ) );
				}
			}
		}

		public function get_value_from_post() {
			return get_post_meta( $this->post->get_id(), $this->get_key(), true );
		}

		public function dynamic_data() {
			return \Voxel\Dynamic_Data\Tag::String( $this->get_label() )->render( function() {
				return $this->get_value();
			} );
		}
	}

	$fields['raw-code'] = \Raw_Code_Custom_Field::class;
	return $fields;
} );

add_action( 'wp_head', function() { ?>
	<script>
		document.addEventListener( 'voxel/create-post/init', e => {
			const { app, config, el } = e.detail;
			app.component( 'field-raw-code', {
				template: `<div class="ts-form-group">
					<label>{{ field.label }}</label>
					<textarea v-model="field.value" class="ts-filter"></textarea>
				</div>`,
				props: { field: Object },
				methods: {
					validate( value ) {
						//
					},
				},
			} );
		} );
	</script>
<?php } );