diff --git a/aircox/forms.py b/aircox/forms.py
index 93ce9d9..a939e5d 100644
--- a/aircox/forms.py
+++ b/aircox/forms.py
@@ -58,6 +58,7 @@ class SoundCreateForm(forms.ModelForm):
     class Meta:
         model = models.Sound
         fields = ["name", "program", "file", "broadcast", "is_public", "is_downloadable"]
+        widgets = {"program": forms.HiddenInput()}
 
 
 TrackFormSet = modelformset_factory(
diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js
index e658754..530596b 100644
--- a/aircox/static/aircox/js/chunk-common.js
+++ b/aircox/static/aircox/js/chunk-common.js
@@ -75,7 +75,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mod
   \******************************************************************************************************************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _model__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model */ \"./src/model.js\");\n/* harmony import */ var _ARows__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ARows */ \"./src/components/ARows.vue\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  emit: ['cell', 'move', 'colmove', 'load'],\n  components: {\n    ARows: _ARows__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\n  },\n  props: {\n    labels: Object,\n    //! If provided call this function instead of adding an item to rows on \"+\" button click.\n    actionAdd: Function,\n    //! If True, columns can be reordered\n    columnsOrderable: Boolean,\n    //! Field name used for ordering\n    orderBy: String,\n    //! Formset data as returned by get_formset_data\n    formData: Object,\n    //! Model class used for item's set\n    model: {\n      type: Function,\n      default: _model__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n    },\n    //! initial data set load at mount\n    initials: Array\n  },\n  data() {\n    return {\n      set: new _model__WEBPACK_IMPORTED_MODULE_2__.Set(_model__WEBPACK_IMPORTED_MODULE_2__[\"default\"])\n    };\n  },\n  computed: {\n    // ---- fields\n    _prefix() {\n      return this.formData.prefix ? this.formData.prefix + '-' : '';\n    },\n    fields() {\n      return this.formData.fields;\n    },\n    orderField() {\n      return this.orderBy && this.fields.find(f => f.name == this.orderBy);\n    },\n    orderable() {\n      return !!this.orderField;\n    },\n    hiddenFields() {\n      return this.fields.filter(f => f.hidden && !(this.orderable && f == this.orderField));\n    },\n    visibleFields() {\n      return this.fields.filter(f => !f.hidden);\n    },\n    fieldSlots() {\n      return this.visibleFields.reduce((slots, f) => ({\n        ...slots,\n        ['row-' + f.name]: f\n      }), {});\n    },\n    items() {\n      return this.set.items;\n    },\n    rows() {\n      return this.$refs.rows;\n    }\n  },\n  methods: {\n    onCellEvent(event) {\n      this.$emit('cell', event);\n    },\n    onMoveColumn(event) {\n      this.$emit('colmove', event);\n    },\n    onActionAdd() {\n      if (this.actionAdd) return this.actionAdd(this);\n      this.set.push();\n    },\n    moveItem(event) {\n      const {\n        from,\n        to\n      } = event;\n      const set_ = event.set || this.set;\n      set_.move(from, to);\n      this.$emit('move', {\n        ...event,\n        seŧ: set_\n      });\n    },\n    removeItem(row) {\n      const item = this.items[row];\n      if (item.id) {\n        // TODO\n      } else {\n        this.items.splice(row, 1);\n      }\n    },\n    //! Load items into set\n    load(items = [], reset = false) {\n      if (reset) this.set.items = [];\n      for (var item of items) this.set.push((0,lodash__WEBPACK_IMPORTED_MODULE_1__.cloneDeep)(item));\n      this.$emit('load', items);\n    },\n    //! Reset forms to initials\n    reset() {\n      this.load(this.initials || [], true);\n    }\n  },\n  mounted() {\n    this.reset();\n  }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AFormSet.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _model__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../model */ \"./src/model.js\");\n/* harmony import */ var _ARows__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ARows */ \"./src/components/ARows.vue\");\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  emit: ['cell', 'move', 'colmove', 'load'],\n  components: {\n    ARows: _ARows__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\n  },\n  props: {\n    labels: Object,\n    //! If provided call this function instead of adding an item to rows on \"+\" button click.\n    actionAdd: Function,\n    //! If True, columns can be reordered\n    columnsOrderable: Boolean,\n    //! Field name used for ordering\n    orderBy: String,\n    //! Formset data as returned by get_formset_data\n    formData: Object,\n    //! Model class used for item's set\n    model: {\n      type: Function,\n      default: _model__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\n    },\n    //! initial data set load at mount\n    initials: Array\n  },\n  data() {\n    return {\n      set: new _model__WEBPACK_IMPORTED_MODULE_2__.Set(_model__WEBPACK_IMPORTED_MODULE_2__[\"default\"])\n    };\n  },\n  computed: {\n    // ---- fields\n    _prefix() {\n      return this.formData.prefix ? this.formData.prefix + '-' : '';\n    },\n    fields() {\n      return this.formData.fields;\n    },\n    orderField() {\n      return this.orderBy && this.fields.find(f => f.name == this.orderBy);\n    },\n    orderable() {\n      return !!this.orderField;\n    },\n    hiddenFields() {\n      return this.fields.filter(f => f.hidden && !(this.orderable && f == this.orderField));\n    },\n    visibleFields() {\n      return this.fields.filter(f => !f.hidden);\n    },\n    fieldSlots() {\n      return this.visibleFields.reduce((slots, f) => ({\n        ...slots,\n        ['row-' + f.name]: f\n      }), {});\n    },\n    items() {\n      return this.set.items;\n    },\n    rows() {\n      return this.$refs.rows;\n    }\n  },\n  methods: {\n    onCellEvent(event) {\n      this.$emit('cell', event);\n    },\n    onColumnMove(event) {\n      this.$emit('colmove', event);\n    },\n    onActionAdd() {\n      if (this.actionAdd) return this.actionAdd(this);\n      this.set.push();\n    },\n    moveItem(event) {\n      const {\n        from,\n        to\n      } = event;\n      const set_ = event.set || this.set;\n      set_.move(from, to);\n      this.$emit('move', {\n        ...event,\n        seŧ: set_\n      });\n    },\n    removeItem(row) {\n      const item = this.items[row];\n      if (item.id) {\n        // TODO\n      } else {\n        this.items.splice(row, 1);\n      }\n    },\n    //! Load items into set\n    load(items = [], reset = false) {\n      if (reset) this.set.items = [];\n      for (var item of items) this.set.push((0,lodash__WEBPACK_IMPORTED_MODULE_1__.cloneDeep)(item));\n      this.$emit('load', items);\n    },\n    //! Reset forms to initials\n    reset() {\n      this.load(this.initials || [], true);\n    }\n  },\n  mounted() {\n    this.reset();\n  }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AFormSet.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
 
 /***/ }),
 
@@ -155,7 +155,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core
   \***************************************************************************************************************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _AList_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AList.vue */ \"./src/components/AList.vue\");\n/* harmony import */ var _ARow_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ARow.vue */ \"./src/components/ARow.vue\");\n\n\nconst Component = {\n  extends: _AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n  components: {\n    ARow: _ARow_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n  },\n  emits: ['cell', 'colmove'],\n  props: {\n    ..._AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].props,\n    //! Ordered list of columns, as objects with:\n    //! - name: item attribute value\n    //! - label: display label\n    //! - help: help text\n    //! - hidden: if true, field is hidden\n    columns: Array,\n    //! If True, columns are orderable\n    columnsOrderable: Boolean\n  },\n  data() {\n    return {\n      ...super.data,\n      // TODO: add observer\n      columns_: [...this.columns],\n      extraItem: new this.set.model()\n    };\n  },\n  computed: {\n    columnNames() {\n      return this.columns_.map(c => c.name);\n    },\n    columnLabels() {\n      return this.columns_.reduce((labels, c) => ({\n        ...labels,\n        [c.name]: c.label\n      }), {});\n    },\n    rowSlots() {\n      return Object.keys(this.$slots).filter(x => x.startsWith('row-')).map(x => [x, x.slice(4)]);\n    }\n  },\n  methods: {\n    /**\n     * Move column using provided event object (as `{from, to}`)\n     */\n    moveColumn(event) {\n      const {\n        from,\n        to\n      } = event;\n      const value = this.columns_[from];\n      this.columns_.splice(from, 1);\n      this.columns_.splice(to, 0, value);\n      this.$emit('colmove', event);\n    },\n    /**\n     * React on 'cell' event, re-emitting it with additional values:\n     * - `set`: data set\n     * - `row`: row index\n     *\n     * @param {Number} row: row index\n     * @param {} data: cell's event data\n     */\n    onCellEvent(row, event) {\n      if (event.name == 'focus') this.focus(event.data, event.cell);\n      this.$emit('cell', {\n        ...event,\n        row,\n        set: this.set\n      });\n    },\n    /**\n     * Return row component at provided index\n     */\n    getRow(row) {\n      const els = this.$el.querySelectorAll('tr');\n      for (var el of els) if (el.__row && row == Number(el.dataset.row)) return el.__row;\n    },\n    /**\n    * Focus on a cell\n    */\n    focus(row, col, from = null) {\n      if (from) row += from.row;\n      row = this.getRow(row);\n      row && row.focus(col, from);\n    }\n  }\n};\nComponent.props.itemTag.default = 'tr';\nComponent.props.listTag.default = 'tbody';\n/* harmony default export */ __webpack_exports__[\"default\"] = (Component);\n\n//# sourceURL=webpack://aircox-assets/./src/components/ARows.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _AList_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AList.vue */ \"./src/components/AList.vue\");\n/* harmony import */ var _ARow_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ARow.vue */ \"./src/components/ARow.vue\");\n\n\nconst Component = {\n  extends: _AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n  components: {\n    ARow: _ARow_vue__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\n  },\n  //! Event:\n  //! - cell(event): an event occured inside cell\n  //! - colmove({from,to}), colmove(): columns moved\n  emits: ['cell', 'colmove'],\n  props: {\n    ..._AList_vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].props,\n    //! Ordered list of columns, as objects with:\n    //! - name: item attribute value\n    //! - label: display label\n    //! - help: help text\n    //! - hidden: if true, field is hidden\n    columns: Array,\n    //! If True, columns are orderable\n    columnsOrderable: Boolean\n  },\n  data() {\n    return {\n      ...super.data,\n      // TODO: add observer\n      columns_: [...this.columns],\n      extraItem: new this.set.model()\n    };\n  },\n  computed: {\n    columnNames() {\n      return this.columns_.map(c => c.name);\n    },\n    columnLabels() {\n      return this.columns_.reduce((labels, c) => ({\n        ...labels,\n        [c.name]: c.label\n      }), {});\n    },\n    rowSlots() {\n      return Object.keys(this.$slots).filter(x => x.startsWith('row-')).map(x => [x, x.slice(4)]);\n    }\n  },\n  methods: {\n    // TODO: use in tracklist\n    sortColumns(names) {\n      const ordered = names.map(n => this.columns_.find(c => c.name == n)).filter(c => !!c);\n      const remaining = this.columns_.filter(c => names.indexOf(c.name) == -1);\n      this.columns_ = [...ordered, ...remaining];\n      this.$emit('colmove');\n    },\n    /**\n     * Move column using provided event object (as `{from, to}`)\n     */\n    moveColumn(event) {\n      const {\n        from,\n        to\n      } = event;\n      const value = this.columns_[from];\n      this.columns_.splice(from, 1);\n      this.columns_.splice(to, 0, value);\n      this.$emit('colmove', event);\n    },\n    /**\n     * React on 'cell' event, re-emitting it with additional values:\n     * - `set`: data set\n     * - `row`: row index\n     *\n     * @param {Number} row: row index\n     * @param {} data: cell's event data\n     */\n    onCellEvent(row, event) {\n      if (event.name == 'focus') this.focus(event.data, event.cell);\n      this.$emit('cell', {\n        ...event,\n        row,\n        set: this.set\n      });\n    },\n    /**\n     * Return row component at provided index\n     */\n    getRow(row) {\n      const els = this.$el.querySelectorAll('tr');\n      for (var el of els) if (el.__row && row == Number(el.dataset.row)) return el.__row;\n    },\n    /**\n    * Focus on a cell\n    */\n    focus(row, col, from = null) {\n      if (from) row += from.row;\n      row = this.getRow(row);\n      row && row.focus(col, from);\n    }\n  }\n};\nComponent.props.itemTag.default = 'tr';\nComponent.props.listTag.default = 'tbody';\n/* harmony default export */ __webpack_exports__[\"default\"] = (Component);\n\n//# sourceURL=webpack://aircox-assets/./src/components/ARows.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
 
 /***/ }),
 
@@ -225,7 +225,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */
   \**************************************************************************************************************************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Page: function() { return /* binding */ Page; }\n/* harmony export */ });\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _AActionButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AActionButton */ \"./src/components/AActionButton.vue\");\n/* harmony import */ var _AFormSet__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./AFormSet */ \"./src/components/AFormSet.vue\");\n/* harmony import */ var _ARow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ARow */ \"./src/components/ARow.vue\");\n/* harmony import */ var _AModal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./AModal */ \"./src/components/AModal.vue\");\n\n\n\n\n\n\n\n/// Page display\nconst Page = {\n  Text: 0,\n  List: 1,\n  Settings: 2\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  components: {\n    AActionButton: _AActionButton__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    AFormSet: _AFormSet__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    ARow: _ARow__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    AModal: _AModal__WEBPACK_IMPORTED_MODULE_5__[\"default\"]\n  },\n  props: {\n    formData: Object,\n    labels: Object,\n    ///! initial data as: {items: [], fields: {column_name: label, settings: {}}\n    initData: Object,\n    dataPrefix: String,\n    settingsUrl: String,\n    defaultColumns: {\n      type: Array,\n      default: () => ['artist', 'title', 'tags', 'album', 'year', 'timestamp']\n    }\n  },\n  data() {\n    const settings = {\n      // tracklist_editor_columns: this.columns,\n      tracklist_editor_sep: ' -- '\n    };\n    return {\n      Page: Page,\n      page: Page.Text,\n      extraData: {},\n      settings,\n      savedSettings: (0,lodash__WEBPACK_IMPORTED_MODULE_1__.cloneDeep)(settings)\n    };\n  },\n  computed: {\n    rows() {\n      return this.$refs.formset && this.$refs.formset.rows;\n    },\n    columns() {\n      return this.rows && this.rows.columns_ || [];\n    },\n    settingsChanged() {\n      var k = Object.keys(this.savedSettings).findIndex(k => !(0,lodash__WEBPACK_IMPORTED_MODULE_1__.isEqual)(this.settings[k], this.savedSettings[k]));\n      return k != -1;\n    },\n    separator: {\n      set(value) {\n        this.settings.tracklist_editor_sep = value;\n        if (this.page == Page.List) this.updateInput();\n      },\n      get() {\n        return this.settings.tracklist_editor_sep;\n      }\n    },\n    rowsSlots() {\n      return Object.keys(this.$slots).filter(x => x.startsWith('row-') || x.startsWith('rows-') || x.startsWith('control-')).map(x => [x, x.startsWith('rows-') ? x.slice(5) : x]);\n    }\n  },\n  methods: {\n    onCellEvent(event) {\n      switch (event.name) {\n        case 'change':\n          this.updateInput();\n          break;\n      }\n    },\n    formatMove({\n      from,\n      to\n    }) {\n      this.$refs.formset.rows.columnMove({\n        from,\n        to\n      });\n      /*this.settings.tracklist_editor_columns.splice(from, 1)\n      this.settings.tracklist_editor_columns.splice(to, 0, value)*/\n    },\n\n    moveItem({\n      from,\n      to,\n      set\n    }) {\n      set.move(from, to);\n      this.updateInput();\n    },\n    onColumnMove() {\n      if (this.page == this.Page.List) this.updateInput();else this.updateList();\n    },\n    updateList() {\n      const items = this.toList(this.$refs.textarea.value);\n      this.$refs.formset.set.reset(items);\n    },\n    updateInput() {\n      const input = this.toText(this.$refs.formset.items);\n      this.$refs.textarea.value = input;\n    },\n    /**\n     * From input and separator, return list of items.\n     */\n    toList(input) {\n      const columns = this.$refs.formset.rows.columns_;\n      var lines = input.split('\\n');\n      var items = [];\n      for (let line of lines) {\n        line = line.trimLeft();\n        if (!line) continue;\n        var lineBits = line.split(this.separator);\n        var item = {};\n        for (var col in columns) {\n          if (col >= lineBits.length) break;\n          const column = columns[col];\n          item[column.name] = lineBits[col].trim();\n        }\n        item && items.push(item);\n      }\n      return items;\n    },\n    /**\n     * From items and separator return a string\n     */\n    toText(items) {\n      const columns = this.$refs.formset.rows.columns_;\n      const sep = ` ${this.separator.trim()} `;\n      const lines = [];\n      for (let item of items) {\n        if (!item) continue;\n        var line = [];\n        for (var col of columns) line.push(item.data[col.name] || '');\n        line = (0,lodash__WEBPACK_IMPORTED_MODULE_1__.dropRightWhile)(line, x => !x || !('' + x).trim());\n        line = line.join(sep).trimRight();\n        lines.push(line);\n      }\n      return lines.join('\\n');\n    },\n    _data_key(key) {\n      key = key.slice(this.dataPrefix.length);\n      try {\n        var [index, attr] = key.split('-', 1);\n        return [Number(index), attr];\n      } catch (err) {\n        return [null, key];\n      }\n    },\n    //! Update saved settings from this.settings\n    settingsSaved(settings = null) {\n      if (settings !== null) this.settings = settings;\n      if (this.$refs.settings) this.$refs.settings.close();\n      this.savedSettings = (0,lodash__WEBPACK_IMPORTED_MODULE_1__.cloneDeep)(this.settings);\n    }\n\n    /**\n     * Load initial data\n     */\n    /*loadData({items=[], settings=null}, reset=false) {\n        if(settings)\n            this.settingsSaved(settings)\n        this.updateInput()\n     },*/\n  },\n\n  mounted() {\n    //this.initData && this.initData.settings &&\n    //this.initData && this.loadData(this.initData)\n    this.page = this.initData.items.length ? Page.List : Page.Text;\n  }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/ATrackListEditor.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Page: function() { return /* binding */ Page; }\n/* harmony export */ });\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _AActionButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AActionButton */ \"./src/components/AActionButton.vue\");\n/* harmony import */ var _AFormSet__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./AFormSet */ \"./src/components/AFormSet.vue\");\n/* harmony import */ var _ARow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ARow */ \"./src/components/ARow.vue\");\n/* harmony import */ var _AModal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./AModal */ \"./src/components/AModal.vue\");\n\n\n\n\n\n\n\n/// Page display\nconst Page = {\n  Text: 0,\n  List: 1,\n  Settings: 2\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  components: {\n    AActionButton: _AActionButton__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    AFormSet: _AFormSet__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    ARow: _ARow__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    AModal: _AModal__WEBPACK_IMPORTED_MODULE_5__[\"default\"]\n  },\n  props: {\n    formData: Object,\n    labels: Object,\n    ///! initial data as: {items: [], fields: {column_name: label, settings: {}}\n    initData: Object,\n    dataPrefix: String,\n    settingsUrl: String,\n    defaultColumns: {\n      type: Array,\n      default: () => ['artist', 'title', 'tags', 'album', 'year', 'timestamp']\n    }\n  },\n  data() {\n    const settings = {\n      // tracklist_editor_columns: this.columns,\n      tracklist_editor_sep: ' -- '\n    };\n    return {\n      Page: Page,\n      page: Page.Text,\n      extraData: {},\n      settings,\n      savedSettings: (0,lodash__WEBPACK_IMPORTED_MODULE_1__.cloneDeep)(settings)\n    };\n  },\n  computed: {\n    rows() {\n      return this.$refs.formset && this.$refs.formset.rows;\n    },\n    columns() {\n      return this.rows && this.rows.columns_ || [];\n    },\n    settingsChanged() {\n      var k = Object.keys(this.savedSettings).findIndex(k => !(0,lodash__WEBPACK_IMPORTED_MODULE_1__.isEqual)(this.settings[k], this.savedSettings[k]));\n      return k != -1;\n    },\n    separator: {\n      set(value) {\n        this.settings.tracklist_editor_sep = value;\n        if (this.page == Page.List) this.updateInput();\n      },\n      get() {\n        return this.settings.tracklist_editor_sep;\n      }\n    },\n    rowsSlots() {\n      return Object.keys(this.$slots).filter(x => x.startsWith('row-') || x.startsWith('rows-') || x.startsWith('control-')).map(x => [x, x.startsWith('rows-') ? x.slice(5) : x]);\n    }\n  },\n  methods: {\n    onCellEvent(event) {\n      switch (event.name) {\n        case 'change':\n          this.updateInput();\n          break;\n      }\n    },\n    onColumnMove() {\n      this.settings.tracklist_editor_columns = this.$refs.formset.rows.columnNames;\n      if (this.page == this.Page.List) this.updateInput();else this.updateList();\n    },\n    updateList() {\n      const items = this.toList(this.$refs.textarea.value);\n      this.$refs.formset.set.reset(items);\n    },\n    updateInput() {\n      const input = this.toText(this.$refs.formset.items);\n      this.$refs.textarea.value = input;\n    },\n    /**\n     * From input and separator, return list of items.\n     */\n    toList(input) {\n      const columns = this.$refs.formset.rows.columns_;\n      var lines = input.split('\\n');\n      var items = [];\n      for (let line of lines) {\n        line = line.trimLeft();\n        if (!line) continue;\n        var lineBits = line.split(this.separator);\n        var item = {};\n        for (var col in columns) {\n          if (col >= lineBits.length) break;\n          const column = columns[col];\n          item[column.name] = lineBits[col].trim();\n        }\n        item && items.push(item);\n      }\n      return items;\n    },\n    /**\n     * From items and separator return a string\n     */\n    toText(items) {\n      const columns = this.$refs.formset.rows.columns_;\n      const sep = ` ${this.separator.trim()} `;\n      const lines = [];\n      for (let item of items) {\n        if (!item) continue;\n        var line = [];\n        for (var col of columns) line.push(item.data[col.name] || '');\n        line = (0,lodash__WEBPACK_IMPORTED_MODULE_1__.dropRightWhile)(line, x => !x || !('' + x).trim());\n        line = line.join(sep).trimRight();\n        lines.push(line);\n      }\n      return lines.join('\\n');\n    },\n    _data_key(key) {\n      key = key.slice(this.dataPrefix.length);\n      try {\n        var [index, attr] = key.split('-', 1);\n        return [Number(index), attr];\n      } catch (err) {\n        return [null, key];\n      }\n    },\n    //! Update saved settings from this.settings\n    settingsSaved(settings = null) {\n      if (settings !== null) this.settings = settings;\n      if (this.$refs.settings) this.$refs.settings.close();\n      this.savedSettings = (0,lodash__WEBPACK_IMPORTED_MODULE_1__.cloneDeep)(this.settings);\n    }\n  },\n  mounted() {\n    const settings = this.initData && this.initData.settings;\n    if (settings) {\n      this.settingsSaved(settings);\n      this.rows.sortColumns(settings.tracklist_editor_columns);\n    }\n    this.page = this.initData.items.length ? Page.List : Page.Text;\n  }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/ATrackListEditor.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
 
 /***/ }),
 
@@ -295,7 +295,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**********************************************************************************************************************************************************************************************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = [\"name\", \"value\"];\nconst _hoisted_2 = [\"name\", \"value\"];\nconst _hoisted_3 = [\"title\", \"aria-label\", \"aria-description\"];\nconst _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-arrow-down-1-9\"\n})], -1 /* HOISTED */);\nconst _hoisted_5 = [_hoisted_4];\nconst _hoisted_6 = [\"name\", \"value\"];\nconst _hoisted_7 = [\"name\", \"value\"];\nconst _hoisted_8 = [\"name\", \"value\"];\nconst _hoisted_9 = {\n  key: 0\n};\nconst _hoisted_10 = {\n  class: \"field\"\n};\nconst _hoisted_11 = {\n  class: \"control\"\n};\nconst _hoisted_12 = {\n  class: \"align-right pr-0\"\n};\nconst _hoisted_13 = [\"onClick\", \"title\", \"aria-label\"];\nconst _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-trash\"\n})], -1 /* HOISTED */);\nconst _hoisted_15 = [_hoisted_14];\nconst _hoisted_16 = {\n  class: \"a-formset-footer flex-row\"\n};\nconst _hoisted_17 = {\n  class: \"flex-grow-1 flex-row\"\n};\nconst _hoisted_18 = {\n  class: \"flex-grow-1 align-right\"\n};\nconst _hoisted_19 = [\"title\", \"aria-label\"];\nconst _hoisted_20 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-rotate\"\n})], -1 /* HOISTED */);\nconst _hoisted_21 = [_hoisted_20];\nconst _hoisted_22 = [\"title\", \"aria-label\"];\nconst _hoisted_23 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-plus\"\n})], -1 /* HOISTED */);\nconst _hoisted_24 = [_hoisted_23];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_a_rows = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-rows\");\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n    type: \"hidden\",\n    name: $options._prefix + 'TOTAL_FORMS',\n    value: $options.items.length || 0\n  }, null, 8 /* PROPS */, _hoisted_1), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.formData.management, (value, name) => {\n    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"input\", {\n      key: name,\n      type: \"hidden\",\n      name: $options._prefix + name.toUpperCase(),\n      value: value\n    }, null, 8 /* PROPS */, _hoisted_2);\n  }), 128 /* KEYED_FRAGMENT */)), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_rows, {\n    ref: \"rows\",\n    set: $data.set,\n    columns: $options.visibleFields,\n    columnsOrderable: $props.columnsOrderable,\n    orderable: $options.orderable,\n    onMove: $options.moveItem,\n    onColmove: $options.onMoveColumn,\n    onCell: _cache[0] || (_cache[0] = e => _ctx.$emit('cell', e))\n  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createSlots)({\n    \"header-head\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [$options.orderable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      key: 0\n    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"th\", {\n      style: {\n        \"max-width\": \"2em\"\n      },\n      title: $options.orderField.label,\n      \"aria-label\": $options.orderField.label,\n      \"aria-description\": $options.orderField.help || ''\n    }, _hoisted_5, 8 /* PROPS */, _hoisted_3), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"rows-header-head\")], 64 /* STABLE_FRAGMENT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n    \"row-head\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [$options.orderable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"input\", {\n      key: 0,\n      type: \"hidden\",\n      name: $options._prefix + data.row + '-' + $props.orderBy,\n      value: data.row\n    }, null, 8 /* PROPS */, _hoisted_6)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n      type: \"hidden\",\n      name: $options._prefix + data.row + '-id',\n      value: data.item ? data.item.id : ''\n    }, null, 8 /* PROPS */, _hoisted_7), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.hiddenFields, field => {\n      return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n        key: field.name\n      }, [!(field.name in ['id', $props.orderBy]) ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"input\", {\n        key: 0,\n        type: \"hidden\",\n        name: $options._prefix + data.row + '-' + field.name,\n        value: field.value in [null, undefined] ? data.item.data[_ctx.name] : field.value\n      }, null, 8 /* PROPS */, _hoisted_8)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)], 64 /* STABLE_FRAGMENT */);\n    }), 128 /* KEYED_FRAGMENT */)), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"row-head\", (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeProps)((0,vue__WEBPACK_IMPORTED_MODULE_0__.guardReactiveProps)(data)), () => [$options.orderable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"td\", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.row + 1), 1 /* TEXT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)])]),\n    \"row-tail\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [_ctx.$slots['row-tail'] ? (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"row-tail\", (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeProps)((0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)({\n      key: 0\n    }, data))) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"td\", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n      type: \"button\",\n      class: \"button square\",\n      onClick: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)($event => $options.removeItem(data.row, data.item), [\"stop\"]),\n      title: $props.labels.remove_item,\n      \"aria-label\": $props.labels.remove_item\n    }, _hoisted_15, 8 /* PROPS */, _hoisted_13)])]),\n    _: 2 /* DYNAMIC */\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.fieldSlots, (field, slot) => {\n    return {\n      name: slot,\n      fn: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, slot, (0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)(data, {\n        field: field,\n        inputName: $options._prefix + data.cell.row + '-' + field.name\n      }), () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, 'control-' + field.name, (0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)(data, {\n        field: field,\n        inputName: $options._prefix + data.cell.row + '-' + field.name\n      }))]), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(data.item.error(field.name), ([error, index]) => {\n        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"p\", {\n          class: \"help is-danger\",\n          key: index\n        }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(error), 1 /* TEXT */);\n      }), 128 /* KEYED_FRAGMENT */))])])])\n    };\n  })]), 1032 /* PROPS, DYNAMIC_SLOTS */, [\"set\", \"columns\", \"columnsOrderable\", \"orderable\", \"onMove\", \"onColmove\"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"footer\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: \"button square is-warning p-2\",\n    onClick: _cache[1] || (_cache[1] = $event => $options.reset()),\n    title: $props.labels.discard_changes,\n    \"aria-label\": $props.labels.discard_changes\n  }, _hoisted_21, 8 /* PROPS */, _hoisted_19), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: \"button square is-primary p-2\",\n    onClick: _cache[2] || (_cache[2] = (...args) => $options.onActionAdd && $options.onActionAdd(...args)),\n    title: $props.labels.add_item,\n    \"aria-label\": $props.labels.add_item\n  }, _hoisted_24, 8 /* PROPS */, _hoisted_22)])])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AFormSet.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = [\"name\", \"value\"];\nconst _hoisted_2 = [\"name\", \"value\"];\nconst _hoisted_3 = [\"title\", \"aria-label\", \"aria-description\"];\nconst _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-arrow-down-1-9\"\n})], -1 /* HOISTED */);\nconst _hoisted_5 = [_hoisted_4];\nconst _hoisted_6 = [\"name\", \"value\"];\nconst _hoisted_7 = [\"name\", \"value\"];\nconst _hoisted_8 = [\"name\", \"value\"];\nconst _hoisted_9 = {\n  key: 0\n};\nconst _hoisted_10 = {\n  class: \"field\"\n};\nconst _hoisted_11 = {\n  class: \"control\"\n};\nconst _hoisted_12 = {\n  class: \"align-right pr-0\"\n};\nconst _hoisted_13 = [\"onClick\", \"title\", \"aria-label\"];\nconst _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-trash\"\n})], -1 /* HOISTED */);\nconst _hoisted_15 = [_hoisted_14];\nconst _hoisted_16 = {\n  class: \"a-formset-footer flex-row\"\n};\nconst _hoisted_17 = {\n  class: \"flex-grow-1 flex-row\"\n};\nconst _hoisted_18 = {\n  class: \"flex-grow-1 align-right\"\n};\nconst _hoisted_19 = [\"title\", \"aria-label\"];\nconst _hoisted_20 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-rotate\"\n})], -1 /* HOISTED */);\nconst _hoisted_21 = [_hoisted_20];\nconst _hoisted_22 = [\"title\", \"aria-label\"];\nconst _hoisted_23 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-plus\"\n})], -1 /* HOISTED */);\nconst _hoisted_24 = [_hoisted_23];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_a_rows = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-rows\");\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n    type: \"hidden\",\n    name: $options._prefix + 'TOTAL_FORMS',\n    value: $options.items.length || 0\n  }, null, 8 /* PROPS */, _hoisted_1), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($props.formData.management, (value, name) => {\n    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"input\", {\n      key: name,\n      type: \"hidden\",\n      name: $options._prefix + name.toUpperCase(),\n      value: value\n    }, null, 8 /* PROPS */, _hoisted_2);\n  }), 128 /* KEYED_FRAGMENT */)), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_rows, {\n    ref: \"rows\",\n    set: $data.set,\n    columns: $options.visibleFields,\n    columnsOrderable: $props.columnsOrderable,\n    orderable: $options.orderable,\n    onMove: $options.moveItem,\n    onColmove: $options.onColumnMove,\n    onCell: _cache[0] || (_cache[0] = e => _ctx.$emit('cell', e))\n  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createSlots)({\n    \"header-head\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [$options.orderable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n      key: 0\n    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"th\", {\n      style: {\n        \"max-width\": \"2em\"\n      },\n      title: $options.orderField.label,\n      \"aria-label\": $options.orderField.label,\n      \"aria-description\": $options.orderField.help || ''\n    }, _hoisted_5, 8 /* PROPS */, _hoisted_3), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"rows-header-head\")], 64 /* STABLE_FRAGMENT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n    \"row-head\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [$options.orderable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"input\", {\n      key: 0,\n      type: \"hidden\",\n      name: $options._prefix + data.row + '-' + $props.orderBy,\n      value: data.row\n    }, null, 8 /* PROPS */, _hoisted_6)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n      type: \"hidden\",\n      name: $options._prefix + data.row + '-id',\n      value: data.item ? data.item.id : ''\n    }, null, 8 /* PROPS */, _hoisted_7), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.hiddenFields, field => {\n      return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, {\n        key: field.name\n      }, [!(field.name in ['id', $props.orderBy]) ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"input\", {\n        key: 0,\n        type: \"hidden\",\n        name: $options._prefix + data.row + '-' + field.name,\n        value: field.value in [null, undefined] ? data.item.data[_ctx.name] : field.value\n      }, null, 8 /* PROPS */, _hoisted_8)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)], 64 /* STABLE_FRAGMENT */);\n    }), 128 /* KEYED_FRAGMENT */)), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"row-head\", (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeProps)((0,vue__WEBPACK_IMPORTED_MODULE_0__.guardReactiveProps)(data)), () => [$options.orderable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"td\", _hoisted_9, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(data.row + 1), 1 /* TEXT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)])]),\n    \"row-tail\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [_ctx.$slots['row-tail'] ? (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"row-tail\", (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeProps)((0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)({\n      key: 0\n    }, data))) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"td\", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n      type: \"button\",\n      class: \"button square\",\n      onClick: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)($event => $options.removeItem(data.row, data.item), [\"stop\"]),\n      title: $props.labels.remove_item,\n      \"aria-label\": $props.labels.remove_item\n    }, _hoisted_15, 8 /* PROPS */, _hoisted_13)])]),\n    _: 2 /* DYNAMIC */\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.fieldSlots, (field, slot) => {\n    return {\n      name: slot,\n      fn: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, slot, (0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)(data, {\n        field: field,\n        inputName: $options._prefix + data.cell.row + '-' + field.name\n      }), () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, 'control-' + field.name, (0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)(data, {\n        field: field,\n        inputName: $options._prefix + data.cell.row + '-' + field.name\n      }))]), ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(data.item.error(field.name), ([error, index]) => {\n        return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"p\", {\n          class: \"help is-danger\",\n          key: index\n        }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(error), 1 /* TEXT */);\n      }), 128 /* KEYED_FRAGMENT */))])])])\n    };\n  })]), 1032 /* PROPS, DYNAMIC_SLOTS */, [\"set\", \"columns\", \"columnsOrderable\", \"orderable\", \"onMove\", \"onColmove\"]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"footer\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_18, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: \"button square is-warning p-2\",\n    onClick: _cache[1] || (_cache[1] = $event => $options.reset()),\n    title: $props.labels.discard_changes,\n    \"aria-label\": $props.labels.discard_changes\n  }, _hoisted_21, 8 /* PROPS */, _hoisted_19), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: \"button square is-primary p-2\",\n    onClick: _cache[2] || (_cache[2] = (...args) => $options.onActionAdd && $options.onActionAdd(...args)),\n    title: $props.labels.add_item,\n    \"aria-label\": $props.labels.add_item\n  }, _hoisted_24, 8 /* PROPS */, _hoisted_22)])])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AFormSet.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
 
 /***/ }),
 
@@ -445,7 +445,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \******************************************************************************************************************************************************************************************************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n  class: \"a-tracklist-editor\"\n};\nconst _hoisted_2 = {\n  class: \"flex-row\"\n};\nconst _hoisted_3 = {\n  class: \"flex-grow-1\"\n};\nconst _hoisted_4 = {\n  class: \"flex-row align-right\"\n};\nconst _hoisted_5 = {\n  class: \"field has-addons\"\n};\nconst _hoisted_6 = {\n  class: \"control\"\n};\nconst _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-pencil\"\n})], -1 /* HOISTED */);\nconst _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Texte\", -1 /* HOISTED */);\nconst _hoisted_9 = [_hoisted_7, _hoisted_8];\nconst _hoisted_10 = {\n  class: \"control\"\n};\nconst _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-list\"\n})], -1 /* HOISTED */);\nconst _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Liste\", -1 /* HOISTED */);\nconst _hoisted_13 = [_hoisted_11, _hoisted_12];\nconst _hoisted_14 = {\n  class: \"panel\"\n};\nconst _hoisted_15 = {\n  class: \"panel\"\n};\nconst _hoisted_16 = {\n  class: \"field\"\n};\nconst _hoisted_17 = {\n  class: \"control\"\n};\nconst _hoisted_18 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-cog\"\n})], -1 /* HOISTED */);\nconst _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Options\", -1 /* HOISTED */);\nconst _hoisted_20 = [_hoisted_18, _hoisted_19];\nconst _hoisted_21 = {\n  class: \"field\"\n};\nconst _hoisted_22 = {\n  class: \"label\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n};\nconst _hoisted_23 = {\n  class: \"table is-bordered\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n};\nconst _hoisted_24 = {\n  key: 0\n};\nconst _hoisted_25 = {\n  key: 0,\n  style: {\n    \"cursor\": \"pointer\"\n  }\n};\nconst _hoisted_26 = [\"onClick\"];\nconst _hoisted_27 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-left-right\"\n}, null, -1 /* HOISTED */);\nconst _hoisted_28 = [_hoisted_27];\nconst _hoisted_29 = {\n  class: \"flex-row\"\n};\nconst _hoisted_30 = {\n  class: \"field is-inline-block is-vcentered flex-grow-1\"\n};\nconst _hoisted_31 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"label\", {\n  class: \"label is-inline mr-2\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n}, \" Séparateur\", -1 /* HOISTED */);\nconst _hoisted_32 = {\n  class: \"control is-inline-block\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n};\nconst _hoisted_33 = {\n  class: \"flex-row align-right\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_a_form_set = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-form-set\");\n  const _component_a_row = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-row\");\n  const _component_a_action_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-action-button\");\n  const _component_a_modal = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-modal\");\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"title\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['button', 'p-2', $data.page == $data.Page.Text ? 'is-primary' : 'is-light']),\n    onClick: _cache[0] || (_cache[0] = $event => $data.page = $data.Page.Text)\n  }, _hoisted_9, 2 /* CLASS */)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['button', 'p-2', $data.page == $data.Page.List ? 'is-primary' : 'is-light']),\n    onClick: _cache[1] || (_cache[1] = $event => $data.page = $data.Page.List)\n  }, _hoisted_13, 2 /* CLASS */)])])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"section\", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"textarea\", {\n    ref: \"textarea\",\n    class: \"is-fullwidth is-size-6\",\n    rows: \"20\",\n    onChange: _cache[2] || (_cache[2] = (...args) => $options.updateList && $options.updateList(...args))\n  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)], 512 /* NEED_PATCH */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.page == $data.Page.Text]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"section\", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_form_set, {\n    ref: \"formset\",\n    \"form-data\": $props.formData,\n    initials: $props.initData.items,\n    columnsOrderable: true,\n    labels: $props.labels,\n    \"order-by\": \"position\",\n    onLoad: $options.updateInput,\n    onColmove: $options.updateInput,\n    onMove: $options.updateInput,\n    onCell: $options.onCellEvent\n  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createSlots)({\n    footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n      type: \"button\",\n      class: \"button is-info\",\n      onClick: _cache[3] || (_cache[3] = $event => _ctx.$refs.settings.open())\n    }, _hoisted_20)])])]),\n    _: 2 /* DYNAMIC */\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.rowsSlots, ([name, slot]) => {\n    return {\n      name: slot,\n      fn: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [name != 'row-tail' ? (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, name, (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeProps)((0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)({\n        key: 0\n      }, data))) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)])\n    };\n  })]), 1032 /* PROPS, DYNAMIC_SLOTS */, [\"form-data\", \"initials\", \"labels\", \"onLoad\", \"onColmove\", \"onMove\", \"onCell\"])], 512 /* NEED_PATCH */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.page == $data.Page.List]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_modal, {\n    ref: \"settings\",\n    title: \"Options\"\n  }, {\n    default: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_21, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"label\", _hoisted_22, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.labels.columns), 1 /* TEXT */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"table\", _hoisted_23, [_ctx.$refs.formset ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"tr\", _hoisted_24, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_row, {\n      columns: _ctx.$refs.formset.rows.columnNames,\n      item: _ctx.$refs.formset.rows.columnLabels,\n      onMove: _ctx.$refs.formset.rows.moveColumn\n    }, {\n      \"cell-after\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(({\n        cell\n      }) => [cell.col < _ctx.$refs.formset.rows.columns_.length - 1 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"td\", _hoisted_25, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n        class: \"icon\",\n        onClick: $event => _ctx.$refs.formset.rows.moveColumn({\n          from: cell.col,\n          to: cell.col + 1\n        })\n      }, _hoisted_28, 8 /* PROPS */, _hoisted_26)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n      _: 1 /* STABLE */\n    }, 8 /* PROPS */, [\"columns\", \"item\", \"onMove\"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_29, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_30, [_hoisted_31, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_32, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n      type: \"text\",\n      ref: \"sep\",\n      class: \"input is-inline is-text-centered is-small\",\n      style: {\n        \"max-width\": \"5em\"\n      },\n      \"onUpdate:modelValue\": _cache[4] || (_cache[4] = $event => $options.separator = $event),\n      onChange: _cache[5] || (_cache[5] = $event => $options.updateList())\n    }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, $options.separator]])])])])]),\n    footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_33, [$options.settingsChanged ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_a_action_button, {\n      key: 0,\n      icon: \"fa fa-floppy-disk\",\n      class: \"button control p-2 mr-3 is-secondary\",\n      \"run-class\": \"blink\",\n      url: $props.settingsUrl,\n      method: \"POST\",\n      data: $data.settings,\n      \"aria-label\": $props.labels.save_settings,\n      onDone: _cache[6] || (_cache[6] = $event => $options.settingsSaved())\n    }, {\n      default: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.labels.save_settings), 1 /* TEXT */)]),\n\n      _: 1 /* STABLE */\n    }, 8 /* PROPS */, [\"url\", \"data\", \"aria-label\"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n      class: \"button\",\n      type: \"button\",\n      onClick: _cache[7] || (_cache[7] = $event => _ctx.$refs.settings.close())\n    }, \" Fermer \")])]),\n    _: 1 /* STABLE */\n  }, 512 /* NEED_PATCH */)]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/ATrackListEditor.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n  class: \"a-tracklist-editor\"\n};\nconst _hoisted_2 = {\n  class: \"flex-row\"\n};\nconst _hoisted_3 = {\n  class: \"flex-grow-1\"\n};\nconst _hoisted_4 = {\n  class: \"flex-row align-right\"\n};\nconst _hoisted_5 = {\n  class: \"field has-addons\"\n};\nconst _hoisted_6 = {\n  class: \"control\"\n};\nconst _hoisted_7 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-pencil\"\n})], -1 /* HOISTED */);\nconst _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Texte\", -1 /* HOISTED */);\nconst _hoisted_9 = [_hoisted_7, _hoisted_8];\nconst _hoisted_10 = {\n  class: \"control\"\n};\nconst _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-list\"\n})], -1 /* HOISTED */);\nconst _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Liste\", -1 /* HOISTED */);\nconst _hoisted_13 = [_hoisted_11, _hoisted_12];\nconst _hoisted_14 = {\n  class: \"panel\"\n};\nconst _hoisted_15 = {\n  class: \"panel\"\n};\nconst _hoisted_16 = {\n  class: \"field\"\n};\nconst _hoisted_17 = {\n  class: \"control\"\n};\nconst _hoisted_18 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-cog\"\n})], -1 /* HOISTED */);\nconst _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Options\", -1 /* HOISTED */);\nconst _hoisted_20 = [_hoisted_18, _hoisted_19];\nconst _hoisted_21 = {\n  class: \"field\"\n};\nconst _hoisted_22 = {\n  class: \"label\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n};\nconst _hoisted_23 = {\n  class: \"table is-bordered\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n};\nconst _hoisted_24 = {\n  key: 0\n};\nconst _hoisted_25 = {\n  key: 0,\n  style: {\n    \"cursor\": \"pointer\"\n  }\n};\nconst _hoisted_26 = [\"onClick\"];\nconst _hoisted_27 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n  class: \"fa fa-left-right\"\n}, null, -1 /* HOISTED */);\nconst _hoisted_28 = [_hoisted_27];\nconst _hoisted_29 = {\n  class: \"flex-row\"\n};\nconst _hoisted_30 = {\n  class: \"field is-inline-block is-vcentered flex-grow-1\"\n};\nconst _hoisted_31 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"label\", {\n  class: \"label is-inline mr-2\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n}, \" Séparateur\", -1 /* HOISTED */);\nconst _hoisted_32 = {\n  class: \"control is-inline-block\",\n  style: {\n    \"vertical-align\": \"middle\"\n  }\n};\nconst _hoisted_33 = {\n  class: \"flex-row align-right\"\n};\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_a_form_set = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-form-set\");\n  const _component_a_row = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-row\");\n  const _component_a_action_button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-action-button\");\n  const _component_a_modal = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"a-modal\");\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"title\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['button', 'p-2', $data.page == $data.Page.Text ? 'is-primary' : 'is-light']),\n    onClick: _cache[0] || (_cache[0] = $event => $data.page = $data.Page.Text)\n  }, _hoisted_9, 2 /* CLASS */)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    type: \"button\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['button', 'p-2', $data.page == $data.Page.List ? 'is-primary' : 'is-light']),\n    onClick: _cache[1] || (_cache[1] = $event => $data.page = $data.Page.List)\n  }, _hoisted_13, 2 /* CLASS */)])])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"section\", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"textarea\", {\n    ref: \"textarea\",\n    class: \"is-fullwidth is-size-6\",\n    rows: \"20\",\n    onChange: _cache[2] || (_cache[2] = (...args) => $options.updateList && $options.updateList(...args))\n  }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)], 512 /* NEED_PATCH */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.page == $data.Page.Text]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"section\", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_form_set, {\n    ref: \"formset\",\n    \"form-data\": $props.formData,\n    initials: $props.initData.items,\n    columnsOrderable: true,\n    labels: $props.labels,\n    \"order-by\": \"position\",\n    onLoad: $options.updateInput,\n    onColmove: $options.onColumnMove,\n    onMove: $options.updateInput,\n    onCell: $options.onCellEvent\n  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createSlots)({\n    footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n      type: \"button\",\n      class: \"button is-info\",\n      onClick: _cache[3] || (_cache[3] = $event => _ctx.$refs.settings.open())\n    }, _hoisted_20)])])]),\n    _: 2 /* DYNAMIC */\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($options.rowsSlots, ([name, slot]) => {\n    return {\n      name: slot,\n      fn: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(data => [name != 'row-tail' ? (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, name, (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeProps)((0,vue__WEBPACK_IMPORTED_MODULE_0__.mergeProps)({\n        key: 0\n      }, data))) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)])\n    };\n  })]), 1032 /* PROPS, DYNAMIC_SLOTS */, [\"form-data\", \"initials\", \"labels\", \"onLoad\", \"onColmove\", \"onMove\", \"onCell\"])], 512 /* NEED_PATCH */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.page == $data.Page.List]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_modal, {\n    ref: \"settings\",\n    title: \"Options\"\n  }, {\n    default: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_21, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"label\", _hoisted_22, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.labels.columns), 1 /* TEXT */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"table\", _hoisted_23, [_ctx.$refs.formset ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"tr\", _hoisted_24, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_a_row, {\n      columns: _ctx.$refs.formset.rows.columnNames,\n      item: _ctx.$refs.formset.rows.columnLabels,\n      onMove: _ctx.$refs.formset.rows.moveColumn\n    }, {\n      \"cell-after\": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(({\n        cell\n      }) => [cell.col < _ctx.$refs.formset.rows.columns_.length - 1 ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"td\", _hoisted_25, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n        class: \"icon\",\n        onClick: $event => _ctx.$refs.formset.rows.moveColumn({\n          from: cell.col,\n          to: cell.col + 1\n        })\n      }, _hoisted_28, 8 /* PROPS */, _hoisted_26)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n      _: 1 /* STABLE */\n    }, 8 /* PROPS */, [\"columns\", \"item\", \"onMove\"])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_29, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_30, [_hoisted_31, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_32, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n      type: \"text\",\n      ref: \"sep\",\n      class: \"input is-inline is-text-centered is-small\",\n      style: {\n        \"max-width\": \"5em\"\n      },\n      \"onUpdate:modelValue\": _cache[4] || (_cache[4] = $event => $options.separator = $event),\n      onChange: _cache[5] || (_cache[5] = $event => $options.updateList())\n    }, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vModelText, $options.separator]])])])])]),\n    footer: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_33, [$options.settingsChanged ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_a_action_button, {\n      key: 0,\n      icon: \"fa fa-floppy-disk\",\n      class: \"button control p-2 mr-3 is-secondary\",\n      \"run-class\": \"blink\",\n      url: $props.settingsUrl,\n      method: \"POST\",\n      data: $data.settings,\n      \"aria-label\": $props.labels.save_settings,\n      onDone: _cache[6] || (_cache[6] = $event => $options.settingsSaved())\n    }, {\n      default: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.labels.save_settings), 1 /* TEXT */)]),\n\n      _: 1 /* STABLE */\n    }, 8 /* PROPS */, [\"url\", \"data\", \"aria-label\"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n      class: \"button\",\n      type: \"button\",\n      onClick: _cache[7] || (_cache[7] = $event => _ctx.$refs.settings.close())\n    }, \" Fermer \")])]),\n    _: 1 /* STABLE */\n  }, 512 /* NEED_PATCH */)]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/ATrackListEditor.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
 
 /***/ }),
 
diff --git a/aircox/templates/aircox/dashboard/form_field.html b/aircox/templates/aircox/dashboard/form_field.html
index 2402a22..8500c2a 100644
--- a/aircox/templates/aircox/dashboard/form_field.html
+++ b/aircox/templates/aircox/dashboard/form_field.html
@@ -10,7 +10,7 @@ Context:
 {% endcomment %}
 {% load aircox %}
 
-{% if field.is_hidden or hidden %}
+{% if field.widget.is_hidden or hidden %}
 <input type="hidden" name="{{ name }}" value="{{ value|default:"" }}">
 {% elif field|is_checkbox %}
 <input type="checkbox" class="checkbox" name="{{ name }}" {% if value %}checked{% endif %}>
diff --git a/aircox/templates/aircox/dashboard/soundlist_editor.html b/aircox/templates/aircox/dashboard/soundlist_editor.html
index e70a004..28d7d63 100644
--- a/aircox/templates/aircox/dashboard/soundlist_editor.html
+++ b/aircox/templates/aircox/dashboard/soundlist_editor.html
@@ -28,7 +28,7 @@ sound-delete-url="{% url "api:sound-detail" pk=123 %}"
 <template #upload-form>
     {% for field in sound_form %}
     {% with field.name as name %}
-    {% if name in "episode" %}
+    {% if name in "program" %}
         {% include "./form_field.html" with value=field.initial field=field.field hidden=True %}
     {% elif name != "file" %}
     <div class="field is-horizontal">
diff --git a/aircox/templates/aircox/dashboard/v_form_field.html b/aircox/templates/aircox/dashboard/v_form_field.html
index 29e6882..d2809a1 100644
--- a/aircox/templates/aircox/dashboard/v_form_field.html
+++ b/aircox/templates/aircox/dashboard/v_form_field.html
@@ -9,7 +9,7 @@ Context:
 {% endcomment %}
 {% load aircox %}
 
-{% if field.is_hidden or hidden %}
+{% if field.widget.is_hidden or hidden %}
 <input type="hidden" :name="{{ name }}" :value="{{ value|default:"" }}">
 {% elif field|is_checkbox %}
 <input type="checkbox" class="checkbox" :name="{{ name }}" v-model="{{ value }}">
diff --git a/assets/src/components/AFormSet.vue b/assets/src/components/AFormSet.vue
index b1d58ae..fcf03fb 100644
--- a/assets/src/components/AFormSet.vue
+++ b/assets/src/components/AFormSet.vue
@@ -8,7 +8,7 @@
 
         <a-rows ref="rows" :set="set"
                 :columns="visibleFields" :columnsOrderable="columnsOrderable"
-                :orderable="orderable" @move="moveItem" @colmove="onMoveColumn"
+                :orderable="orderable" @move="moveItem" @colmove="onColumnMove"
                 @cell="e => $emit('cell', e)">
 
             <template #header-head>
@@ -149,7 +149,7 @@
 
         methods: {
             onCellEvent(event) { this.$emit('cell', event) },
-            onMoveColumn(event) { this.$emit('colmove', event) },
+            onColumnMove(event) { this.$emit('colmove', event) },
             onActionAdd() {
                 if(this.actionAdd)
                     return this.actionAdd(this)
diff --git a/assets/src/components/ARows.vue b/assets/src/components/ARows.vue
index 92cedfb..d31c054 100644
--- a/assets/src/components/ARows.vue
+++ b/assets/src/components/ARows.vue
@@ -47,6 +47,9 @@ import ARow from './ARow.vue'
 const Component = {
     extends: AList,
     components: { ARow },
+    //! Event:
+    //! - cell(event): an event occured inside cell
+    //! - colmove({from,to}), colmove(): columns moved
     emits: ['cell', 'colmove'],
 
     props: {
@@ -83,6 +86,14 @@ const Component = {
     },
 
     methods: {
+        // TODO: use in tracklist
+        sortColumns(names) {
+            const ordered = names.map(n => this.columns_.find(c => c.name == n)).filter(c => !!c);
+            const remaining = this.columns_.filter(c =>  names.indexOf(c.name) == -1)
+            this.columns_ = [...ordered, ...remaining]
+            this.$emit('colmove')
+        },
+
         /**
          * Move column using provided event object (as `{from, to}`)
          */
diff --git a/assets/src/components/ATrackListEditor.vue b/assets/src/components/ATrackListEditor.vue
index fc49ecf..18ca6d3 100644
--- a/assets/src/components/ATrackListEditor.vue
+++ b/assets/src/components/ATrackListEditor.vue
@@ -38,7 +38,7 @@
                 :form-data="formData" :initials="initData.items"
                 :columnsOrderable="true" :labels="labels"
                 order-by="position"
-                @load="updateInput" @colmove="updateInput" @move="updateInput"
+                @load="updateInput" @colmove="onColumnMove" @move="updateInput"
                 @cell="onCellEvent">
                 <template v-for="[name,slot] of rowsSlots" :key="slot"
                         v-slot:[slot]="data">
@@ -195,18 +195,8 @@ export default {
             }
         },
 
-        formatMove({from, to}) {
-            this.$refs.formset.rows.columnMove({from, to})
-            /*this.settings.tracklist_editor_columns.splice(from, 1)
-            this.settings.tracklist_editor_columns.splice(to, 0, value)*/
-        },
-
-        moveItem({from, to, set}) {
-            set.move(from, to);
-            this.updateInput()
-        },
-
         onColumnMove() {
+            this.settings.tracklist_editor_columns = this.$refs.formset.rows.columnNames
             if(this.page == this.Page.List)
                 this.updateInput()
             else
@@ -289,20 +279,14 @@ export default {
                 this.$refs.settings.close()
             this.savedSettings = cloneDeep(this.settings)
         },
-
-        /**
-         * Load initial data
-         */
-        /*loadData({items=[], settings=null}, reset=false) {
-            if(settings)
-                this.settingsSaved(settings)
-            this.updateInput()
-         },*/
     },
 
     mounted() {
-        //this.initData && this.initData.settings &&
-        //this.initData && this.loadData(this.initData)
+        const settings = this.initData && this.initData.settings
+        if(settings) {
+            this.settingsSaved(settings)
+            this.rows.sortColumns(settings.tracklist_editor_columns)
+        }
         this.page = this.initData.items.length ? Page.List : Page.Text
     },
 }