use template element for badge template

app/templates/common/macros.html

@@ -331,8 +331,8 @@
 {% else %}
   {% set selected_href = defaults[0].file_path %}
 {% endif %}
-<bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorBadge" data-listeners="click input submit change">
-<div class="settings-badge-container" data-receive="deleteBadge">
+<bitty-7-0 data-connect="{{ '/static/js/bitties/pyrom-bitty.js' | cachebust }} BadgeEditorBadge" data-listeners="click input submit change" data-receive="deleteBadge">
+<div class="settings-badge-container">
   <div class="settings-badge-select">
     <select data-send="badgeUpdatePreview badgeToggleFilePicker" name="badge_choice[]" required>
       <optgroup label="Default">

app/templates/components/badge_editor_badges.html

@@ -1,4 +1,4 @@
-{% from 'common/macros.html' import badge_editor_single with context %}
+{% from 'common/macros.html' import badge_editor_single %}
 {% for badge in badges %}
   {{ badge_editor_single(options=uploads, selected=badge.upload, badge=badge) }}
 {% endfor %}

app/templates/components/badge_editor_template.html

@@ -1,2 +1,2 @@
-{% from 'common/macros.html' import badge_editor_single with context %}
+{% from 'common/macros.html' import badge_editor_single %}
 {{ badge_editor_single(options=uploads) }}

app/templates/users/settings.html

@@ -1,4 +1,4 @@
-{% from 'common/macros.html' import babycode_editor_component %}
+{% from 'common/macros.html' import babycode_editor_component, badge_editor_single %}
 {% extends 'base.html' %}
 {% block title %}settings{% endblock %}
 {% block content %}
@@ -68,4 +68,8 @@
     <a class="linkbutton critical" href="{{ url_for('users.delete_page', username=active_user.username) }}">Delete account</a>
   </div>
 </div>
+
+<template id='badge-editor-template'>
+{{ badge_editor_single(options=uploads) }}
+</template>
 {% endblock %}