$def with (post, identities, guests)
$var body_classes = ["widescreen"]

$code:
    def get_property(prop):
        return post.pop(prop, [""])[-1]

$ permalink = get_property("url")
$ pad_id = permalink.lstrip('/').replace('/', '--')
$var title: Editing $permalink
$var show_title = False
$var hide_footer = True

<form id=editor method=post action=$tx.origin/editor>
<div id=preview>
    <div id=replyContext></div>
    <div id=previewName></div>
    <div id=previewContent></div>
</div>
<div id=properties>
    <div id=general_properties>
        $# <fieldset id=author>
        $# <legend>Author</legend>
        $# $ author = get_property("author")
        $# $for identity in identities:
        $#     $ card = identity["card"]
        $#     <label class=radio><input required type=radio name=author value=$card["uid"][0]
        $#     $if author and author["uid"] == card["uid"]:
        $#         checked
        $#     $elif card["uid"][0] == "/":
        $#         checked
        $#     > $card["name"][0]</label>
        $# </label>
        $# </fieldset>

        $# <div id=coauthor>
        $#     <label><small>Coauthor</small><br>
        $#     <label class=bounding><fieldset>
        $#     $# $for rsvp in ["yes", "no", "maybe"]:
        $#     $#     <label class=radio><input required type=radio name=rsvp value=$rsvp
        $#     $#     $if "rsvp" in post and rsvp == post["rsvp"][0] or rsvp == "public":
        $#     $#         checked
        $#     $#     > $rsvp</label>
        $#     </fieldset></label>
        $#     </label>
        $# </div>
        $# <ul>
        $# <p><small>Guests currently signed in:</small></p>
        $# $for guest in guests:
        $#     <li><label><input type=checkbox name=coauthor value=$guest["url"]>
        $#     $guest["name"]</label> <small><a href=$guest["url"]>$guest["url"]</a></small></li>
        $# </ul>
        $# </fieldset>

        $# <fieldset id=audience>
        $# <legend>Audience</legend>
        $# $if post:
        $#     $for member_url in post.get("audience", []):
        $#         <label><input checked type=checkbox name=audience value=$member_url>
        $#         $member_url</label>
        $# </fieldset>

        <fieldset id=visibility>
        <legend>Visibility</legend>
        $for vis in ["public", "protected", "private"]:
            <label class=radio><input required type=radio name=visibility value=$vis
            $if vis == get_property("visibility"):
                checked
            > $vis</label>
        </fieldset>

        $# <fieldset id=syndication>
        $# <legend>Syndication</legend>
        $# $for syn in ["mastodon"]:
        $#     <label class=radio><input required type=checkbox name=syndication value=$syn
        $#     $if syn == get_property("syndication"):
        $#         checked
        $#     > $syn</label>
        $# </fieldset>

        $# $ type = get_property("type")
        $# <fieldset id=type>
        $# <legend>Type</legend>
        $# $for _type in ["card", "entry", "event", "recipe", "review"]:
        $#     <label class=radio><input required type=radio name=h value=$_type
        $#     $if (not type and _type == "entry") or _type == type:
        $#         checked
        $#     $else:
        $#         disabled
        $#     > $_type</label>
        $# </fieldset>
    </div>

    $# <div id=card_properties>
    $#     <div id=name>
    $#         <label><small>Name</small><br>
    $#         <label class=bounding><input type=text name=name
    $#         value="$get_property('name')"></label></label>
    $#     </div>
    $# </div>

    <style>
    #entry_properties div {
        display: inline-block;
        width: 100%; }
    </style>
    <div id=entry_properties>
        <div id=in_reply_to>
            <label><small>In reply to</small><br>
            <label class=bounding><input type=text name=in_reply_to
            value="$get_property('in-reply-to')"></label></label>
        </div>
        <div id=rsvp>
            <label><small>RSVP</small><br>
            <label class=bounding><fieldset>
            $for rsvp in ["yes", "no", "maybe"]:
                <label class=radio><input type=radio name=rsvp value=$rsvp
                $if "rsvp" in post and rsvp == post["rsvp"][0] or rsvp == "public":
                    checked
                > $rsvp</label>
            </fieldset></label>
            </label>
        </div>
        <div id=like_of>
            <label><small>Like of</small><br>
            <label class=bounding><input type=text name=like_of
            value="$get_property('like-of')"></label></label>
        </div>
        <div id=bookmark_of>
            <label><small>Bookmark of</small><br>
            <label class=bounding><input type=text name=bookmark_of
            value="$get_property('bookmark-of')"></label></label>
        </div>
        <div id=listen_of>
            <label><small>Listen of</small><br>
            <label class=bounding><input type=text name=listen_of
            value="$get_property('listen-of')"></label></label>
        </div>
        <div id=name>
            <label><small>Name</small><br>
            <label class=bounding><input type=text name=name
            value="$get_property('name')"></label></label>
        </div>
        <div id=summary>
            <label><small>Summary</small><br>
            <label class=bounding><input type=text name=summary
            value="$get_property('summary')"></label></label>
        </div>
        <div id=photo>
            <label><small>Photo</small><br>
            <label class=bounding><input type=text name=name
            value="$get_property('photo')"></label></label>
        </div>
        <div id=econtent>
            <label><small>Content</small><br>
            <label class=bounding>
            $# XXX <div id=editor></div>
            $# XXX <div id=editorStatus></div>
            $# TODO FIXME <textarea id=content-editor name=content>$get_property('content')["html"]</textarea>
            <!--textarea id=content-editor name=content>$get_property('content')</textarea-->
            <iframe src="$tx.origin/pads/p/$pad_id"
                frameborder=0 style=height:30em;width:100%></iframe>
            </label></label>
            $# XXX <div id=connection></div>
            $# XXX <div id=version></div>
        </div>
    </div>

    $# <div id=event_properties>
    $#     <div id=name>
    $#         <label><small>Name</small><br>
    $#         <label class=bounding><input type=text name=name
    $#         value="$get_property('name')"></label></label>
    $#     </div>
    $# </div>
    $# <div id=resume_properties>
    $#     <div id=name>
    $#         <label><small>Name</small><br>
    $#         <label class=bounding><input type=text name=name
    $#         value="$get_property('name')"></label></label>
    $#     </div>
    $# </div>
    $# <div id=review_properties>
    $#     <div id=name>
    $#         <label><small>Name</small><br>
    $#         <label class=bounding><input type=text name=name
    $#         value="$get_property('name')"></label></label>
    $#     </div>
    $# </div>

    $# <fieldset id=categories>
    $#   <legend>Categories</legend>
    $#   <!-- XXX todo populate with call to mp?q=config as with channels -->
    $#   <input type=text><button>Add</button>
    $#   <ul>
    $#   $# $for category in c
    $#   $#     <li><input type=checkbox id=coding name=category value=coding>
    $#   $#     <label for=coding>Coding</label></li>
    $#   </ul>
    $# </fieldset>

    $if published := get_property("published"):
        <div id=published>
        <label for=published><small>Published</small></label><br>
        <input style="border:1px solid #333" type=datetime-local name=published_datetime
        value="$published.to_date_string()T$published.to_time_string()">
        <input style="font-family:monospace;font-size:.9em;border:1px solid #333;width:10em" type=text name=published_microseconds
        value="$published.microsecond">
        <select name=published_tz>
        $for tz in pendulum.timezones:
            $if "/" not in tz:
                $continue
            <option
            $if tz == getattr(published, "timezone_name", "America/Los_Angeles"):
                selected
            >$tz</option>
        </select>
        </div>
    <div id=permalink>
        <label><small>Permalink</small><br>
        <label class=bounding><input readonly type=text name=url
        value=$tx.origin/$permalink.lstrip("/")></label></label>
    </div>
    </div>

    <div class=buttons>
        $# <label><input type=checkbox> Draft Live</label>
        $# <button name=action value=save>Save</button>
        $# if permalink:
        <button name=action value=update>Update</button>
        $# $else:
        $#     <button name=action value=create>Create</button>
    </div>
</form>

$if post:
    <h4>Unused properties</h4>
    <pre>$pformat(post)</pre>

<style>
form#editor {
  column-gap: 2%;
  display: grid;
  grid-template-columns: 49% 49%; }
form#editor input[type=text], textarea {
  background-color: #ddd;
  border: 0;
  padding: 0;
  width: 100%; }
form#editor textarea {
  height: 20em;
  width: 100%; }
form#editor input[type=text] {
  height: 1.5em; }
#categories ul {
  list-style: none;
  padding-left: 0; }
.bounding {
  background-color: #ddd;
  border: .1em solid #333;
  display: block;
  padding: .125em .25em; }
.radio {
  cursor: pointer;
  font-size:.8em }
label small, legend {
  font-size: .8em;
  font-weight: bold; }
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }
ul {
  list-style: none;
  margin: 0; }
.buttons {
  margin-top: 1em;
  text-align: right; }
#author, #coauthor, #type, #in_reply_to, #rsvp, #like_of, #bookmark_of, #listen_of, #name, #summary,
#photo, #econtent, #coauthors, #visibility, #published, #permalink {
  margin-bottom: .5em; }
#in_reply_to input[type=checkbox], #name input[type=checkbox] {
  font-size: .9em; }
#in_reply_to input[type=text], #name input[type=text], #permalink input[type=text] {
  outline: none; }
#in_reply_to input[type=text], #permalink input[type=text] {
  font-size: .9em; }
$# #name input {
$#   font-size: 1.5em;
$#   height: 1.2em; }
#content {
  min-height: 35em; }
</style>

<script type=module>
// XXX import { load, diamondMonaco, MicropubClient } from '/static/web.js'
import { load, MicropubClient } from '/static/web.js'

const pub = new MicropubClient('/posts')

load(() => {
  // document.querySelector('#card_properties').style.display = 'none'
  // document.querySelector('#event_properties').style.display = 'none'
  // document.querySelector('#resume_properties').style.display = 'none'
  // document.querySelector('#review_properties').style.display = 'none'
  const enlivenOptionalProperty = (type, property) => {
    const textbox = document.querySelector(`#$${type}_properties #$${property} .bounding`)
    textbox.style.display = 'none'
    const checkbox = document.createElement('input')
    checkbox.type = 'checkbox'
    checkbox.addEventListener('click', ev => {
      textbox.style.display = ev.target.checked ? 'block' : 'none'
      textbox.focus()
    })
    document.querySelector(`#$${type}_properties #$${property} small`).prepend(checkbox)
  }
  // enlivenOptionalProperty('general', 'coauthor')
  enlivenOptionalProperty('entry', 'in_reply_to')
  enlivenOptionalProperty('entry', 'rsvp')
  enlivenOptionalProperty('entry', 'like_of')
  enlivenOptionalProperty('entry', 'bookmark_of')
  enlivenOptionalProperty('entry', 'listen_of')
  enlivenOptionalProperty('entry', 'name')
  enlivenOptionalProperty('entry', 'summary')
  enlivenOptionalProperty('entry', 'photo')
  enlivenOptionalProperty('entry', 'econtent')

  const getContent = () => {
    // XXX monaco.getValue()
    // return document.querySelector('#content-editor').value
    const request = new XMLHttpRequest()
    request.open("GET", '/pads/p/$pad_id/export/txt', false)
    request.send(null);
    if (request.status === 200) {
      return request.responseText
      // const response = JSON.parse(request.responseText)
      // return response['pad:$pad_id'].atext.text
    }
  }

  var frequency = 1;  // seconds
  var count = 0;
  var clean = true;
  const tick = () => {
    setTimeout(() => {
      if (count++ > frequency) // && !clean)
        updatePreview();
      tick();
    }, 1000);
  }
  tick();
  const updatePreview = () => {
    clean = false;
    if (count > frequency) {
      previewMarkdown();
      clean = true;
      count = 0;
    }
  }
  updatePreview()

  pub.getConfig().then(config => console.log("Micropub Config:", config))
  // pub.getCategories().then(data => {
  //   data.categories.forEach(cat => {
  //     addCategory(cat)
  //   })
  // })

  // TODO on form control change create a permalink and save a draft
  const permalink = '$permalink'
  const properties = {'content': '', 'post-status': 'draft'}

  $# let monaco
  $# pub.create('entry', properties).then(permalink => {
  $#   $# $# document.querySelector('#permalink input[type=text]').value =
  $#   $# $#   `$tx.origin$${permalink}`
  $#   $# monaco = diamondMonaco(
  $#   $#   permalink, editor, editorStatus, connection, version,
  $#   $#   {
  $#   $#     language: 'markdown'
  $#   $#   },
  $#   $#   '$(tx.user.session["uid"][0] if tx.user.session else tx.user.ip)',
  $#   $#   true
  $#   $# )
  $#   $# monaco.onKeyUp(updatePreview)
  $# })

  // document.querySelector('#content-editor').addEventListener('keyup', updatePreview)
  document.querySelector('#in_reply_to input[type=text]').addEventListener('blur', ev => {
    previewReplyContext(ev.target.value)
  })

  addEventListener('beforeunload', ev => {
    ev.stopPropagation()
    ev.preventDefault()
    return false
  }, true)

  document.querySelector('form#editor').addEventListener('submit', ev => {
    ev.preventDefault()
    // let myForm = document.getElementById('editor')
    // let formData = new FormData(myForm)
    // for (let p of formData) {
    //   console.log(p)
    // }
    pub.update(document.querySelector('input[name=url]').value,
      "replace",
      {
        "visibility": [document.querySelector('input[name=visibility]').value],
        "name": [document.querySelector('input[name=name]').value],
        "content": [getContent()]
      }
      // "syndication": [document.querySelector('input[name=syndication]').value],
    )
  
    // const properties = {}
    // const name = document.querySelector('input[name=name]').value
    // if (name) {
    //   properties.name = [name]
    // }
  
    // const content = editor.value
    // if (content) {
    //   properties.content = [content]
    // }
  
    // const published_date = document.querySelector('input[name=published_date]').value
    // const published_time = document.querySelector('input[name=published_time]').value
    // const published_tz = document.querySelector('select[name=published_tz]').value
    // console.log(published_date)
    // console.log(published_time)
    // console.log(published_tz)
    // if (published_date) {
    //   let published = published_date
    //   if (published_time) {
    //     published = `$${published_date}T$${published_time}:00+00:00`
    //   }
    //   properties.published = [{datetime: published, timezone: published_tz}]
    // }
  
    // const categories = []
    // document.querySelectorAll('#categories input[type=checkbox]').forEach(el => {
    //   if (el.checked) {
    //     categories.push(el.value)
    //   }
    // })
    // if (categories.length) {
    //   properties['category'] = categories
    // }
  
    // console.log(properties)
    // pub.create('entry', properties, 'public').then(permalink => {
    //   window.location.href = permalink
    // })
  })
})

const previewMarkdown = () => {
  name = document.querySelector('#name input[type=text]').value
  previewName.innerHTML = `<h1>$${name}</h1>`
  let body = new FormData()
  body.append('pad_id', '$pad_id')
  fetch(
    '/editor/preview/markdown',
    {
      method: 'POST',
      body: body
    }
  ).then(response => {
    if (response.status === 200) {
      return response.json().then(data => {
        previewContent.innerHTML = data['content']
      })
    }
  })
}

const previewReplyContext = url => {
  if (url == '') {
    replyContext.innerHTML = '';
    return
  }
  fetch(
    '/editor/preview/resource?url=' + encodeURIComponent(url),
  ).then(response => {
    if (response.status === 200) {
      return response.json().then(data => {
        replyContext.innerHTML = `<big><strong>$${data['name']}</strong></big><p>$${data['summary']}</p>`
      })
    }
  })
}

$# const addCategory = (cat) => {
$#   const ul = document.querySelector('#categories ul')
$#   const li = document.createElement('li')
$#   const checkbox = document.createElement('input')
$#   const tagname = document.createElement('span')
$#   checkbox.type = 'checkbox'
$#   checkbox.value = cat
$#   li.appendChild(checkbox)
$#   tagname.innerText = cat
$#   li.appendChild(tagname)
$#   ul.appendChild(li)
$# }

$# const { MicropubClient } = web
$# const pub = new MicropubClient('/posts')
$# document.addEventListener('DOMContentLoaded', () => {
$#   pub.getConfig().then(data => console.log(data))
$#   pub.getCategories().then(data => {
$#     data.categories.forEach(cat => {
$#       addCategory(cat)
$#     })
$#   })

$#   document.querySelector('#categories button').addEventListener('click', event => {
$#     event.preventDefault()
$#     const textbox = document.querySelector('#categories input')
$#     addCategory(textbox.value)
$#     textbox.value = ''
$#   })
</script>