$def with (main_app, apps, webint_metadata, webint_versions)
$# , understory_version, applications)
$var title: System

<p>Primary application: <code>$main_app.name</code></p>

<p><code>webint</code> version: $webint_versions[0]
$if webint_versions[1]:
    out of date. current version is $webint_versions[1].
    <form action=/code/system/update method=post><button>Update</button></form>
</p>

<ul style=font-size:.8em>\
$for package, package_apps in sorted(apps.items(), key=lambda x: x[0].metadata["Name"]):
    <li>
    $package.metadata["Name"]
    <small><code>$package.metadata["Version"]</code>
    $for mounted_prefix, mount_app in main_app.mounts:
        $for _, package_app, _, _ in package_apps:
            $if mount_app == package_app:
                mounted at <code>/$mounted_prefix</code>
    </small>
    $# $#app_name
    $# <small><a href=/system/$app.project_name>$app.project_name</a>
    $# <a href=/system/$app.project_name/$app.version><small>$app.version</small></a></small>
    </li>
</ul>

$# <h2>Theme</h2>
$# <form action=/system/theme method=post>
$# $ action = "deactivate" if tx.host.theme else "activate"
$# <button name=action value=$action>$action.capitalize()</button>
$# </form>

<h2>Routes</h2>

$def render_parent_controllers(location, controllers):
    <ul id="$(location)_controllers">
    $for route, controller in controllers:
        <li>
        $ parts = re.split(r"\(\?P<(.+?)>(.+?)\)", route)
        $if len(parts) == 1:
            <a href=$tx.origin/$route>/$controller.__web__[0]</a>
        $else:
            /$controller.__web__[0]
        $ project_mod = "/".join(controller.handler.__module__.split("."))
        $ project = getsourcefile(controller.handler).removeprefix(str(tx.host.working_dir)).lstrip("/").partition("/")[0]
        <small><strong>
        <a class=controller href=/projects/$project/api/$project_mod#$controller.handler.__name__>$controller.handler.__name__</a>
        </strong></small>
        </li>
    </ul>

$:render_parent_controllers("before", main_app.controllers)

<ul id=mounts>
$for prefix, subapp in sorted(main_app.mounts):
    $if subapp.controllers:
        <li>
        $if len(subapp.controllers) > 1:
            <details><summary>
        <a href=$tx.origin/$prefix>/$prefix</a>
        $ root = subapp.controllers[0]
        $if root[0] == "":
            $ project_mod = "/".join(root[1].handler.__module__.split("."))
            $ project = getsourcefile(root[1].handler).removeprefix(str(tx.host.working_dir)).lstrip("/").partition("/")[0]
            <small><strong><a class=controller href=/projects/$project/api/$project_mod#$root[1].handler.__name__>$root[1].handler.__name__</a></strong></small>
            $:str(mkdn((root[1].__doc__.strip() + "\n").splitlines()[0])).removeprefix("<p>").removesuffix("</p>")
        $if len(subapp.controllers) > 1:
            </summary>
            <ul>
            $for route, controller in subapp.controllers[1:]:
                $ parts = re.split(r"\(\?P<(.+?)>(.+?)\)", route)
                <li>\
                $if len(parts) == 1:
                    $if parts[0]:
                        <a href=$tx.origin/$prefix/$parts[0]>/$parts[0]</a>\
                $else:
                    /\
                    $for a, b, c in zip(parts[0::3], parts[1::3], parts[2::3]):
                        $:a.replace("(", '<span class="optional">')\
                        <span title="$c">{$b}</span>\
                    $:parts[-1].replace(")?", "</span>")
                <br>
                $ project_mod = "/".join(controller.handler.__module__.split("."))
                $ project = getsourcefile(controller.handler).removeprefix(str(tx.host.working_dir)).lstrip("/").partition("/")[0]
                <small><strong><a class=controller href=/projects/$project/api/$project_mod#$controller.handler.__name__>$controller.handler.__name__</a></strong></small>
                $:str(mkdn((controller.__doc__.strip() + "\n").splitlines()[0])).removeprefix("<p>").removesuffix("</p>")
                </li>
            </ul>
            </details>
        </li>
</ul>

$:render_parent_controllers("after", main_app.after_controllers)

<h3>Wrappers</h3>
<ol id=wrappers>
$for wrapper in main_app.wrappers:
    <li>$wrapper.__name__<br>
    <small>$wrapper.__module__</small>
    </li>
</ol>

$# $def aside():
$#     $# <h4><a href=/system/applications>Applications</a></h4>
$#     $# <ul id=applications>
$#     $# $for application in applications:
$#     $#     <li>$application.project_name<br>
$#     $#     <small>$application.version</small></li>
$#     $# </ul>
$#     $# <form method=post action=/system/applications>
$#     $#     <label><small>Application URL</small><br>
$#     $#     <label class=bounding><input type=text name=application_url
$#     $#     placeholder="github path, pypi path or .git url"></label></label>
$#     $#     <div class=buttons><button>Install</button></div>
$#     $# </form>
$# $var aside = aside

$# XXX <ul>
$# XXX $for prefix, subapp in main_app.mounts:
$# XXX     $if subapp.wrappers:
$# XXX         $for wrapper in subapp.wrappers:
$# XXX             <li>$wrapper</li>
$# XXX </ul>

<style>
ul#before_controllers, ul#after_controllers, ul#mounts, ul#wrappers {
  list-style: none;
  padding-left: 0; }
ul#mounts > li {
  margin: .25em 0; }
ul#mounts > li li {
  margin: .5em 0; }
em {
  color: #586e75; }
select {
  border: 0; }
#mounts label.bounding {
  display: inline; }
a.controller {
  color: #b58900;
  font-family: mono;
  font-size: .9em;
  text-decoration: none; }
.optional {
  border-style: dotted;
  border-width: .2em; }
@media (prefers-color-scheme: light) {
  .optional {
    border-color: #93a1a1; }
}
@media (prefers-color-scheme: dark) {
  .optional {
    border-color: #586e75; }
}

#applications {
  font-size: .8em;
  list-style: none;
  padding-left: 0; }
</style>