# Dispute Protocol Builder

This is a prototype website, built in Hugo, to enable communities to develop customizable protocols for dispute resolution processes. It guides users through an accessible process that provides best practices while allowing for customization.

## Project Structure

- **Static Site Generator**: Hugo
- **Main Builder Interface**: `/themes/dispute-protocol-theme/layouts/_default/builder.html`
- **JavaScript Files**: 
  - `/static/js/builder.js`: Main application logic
  - `/static/js/templates/*.js`: Individual protocol template definitions
  - `/static/js/templates/index.js`: Central registry of all templates

## Content Organization

- **Components**: Building blocks of a protocol, defined in `/data/components/*.yaml`
- **Templates**: Complete predefined protocols with content for all fields, defined in `/static/js/templates/*.js`

## Data Model

The application maintains a hierarchical data model:
- **Stages** → **Components** → **Fields**
- Each field is populated with content directly from templates

## Core Features

1. **Black & white UI**: Clean, accessible interface with vertical accordion sections
2. **Template selection**: Users can start with a predefined protocol template
3. **Customization**: Direct text editing in fields
4. **Export options**: Markdown, PDF, and JSON formats
5. **Import capability**: Load previously saved protocols
6. **Preview mode**: Toggle to see how the final protocol will appear

## Template System

Templates provide complete content for dispute resolution protocols:
- Each template has: `id`, `title`, `description`, and content data
- Templates define content for all stages and components
- Templates are loaded dynamically using ES Modules
- The template selector provides one-click application of complete protocols

## Recent Improvements

1. **Simplified template system**: Consolidated template loading to a single source of truth
2. **ES Module architecture**: Implemented modern JavaScript module pattern
3. **Enhanced debugging**: Added detailed logging for template application
4. **Component titles**: Simplified all component titles to be more direct and consistent
5. **Preview mode**: Improved rendering of protocol content with Markdown support

## Deployment

- Deployable from a self-hosted GitLab server
- Data is maintained in YAML files for components and stages
- Template content is defined in JavaScript files for easy client-side use

## Key Files to Modify

- `/static/js/templates/*.js`: Add, edit or remove protocol templates
- `/static/js/templates/index.js`: Register new templates in the central registry
- `/static/js/builder.js`: Modify core interface functionality
- `/static/css/main.css`: Adjust styling and responsive behavior
- `/data/components/*.yaml`: Edit component titles and structure