Enable CSRF TOKEN in Django html coded using element-ui

I am trying to add CSRF TOKEN in my html script (Django framework) for ensure CSRF protection so that my POST requests will be be classified as an unsafe request.
However I am unsure of where I should place it. When I place it within {% verbatim %}, it comes off as a text as shown on in the image.

Really desperate and really appreciate any advice.

{%extends "doctor.html" %}
{% block emr %}active{% endblock %}
{% block mainbody %}
{% verbatim %}
{% csrf_token %}
<div id="app2" class="container">
<el-row :gutter="20" style="width: 90%; height: 120%;">
<el-col :span="12">
<div class="info-wrapper">
<div class="header">Add new medication delivery jobs</div>
<el-form ref="deliveryInfoForm" :model="deliveryInfo" :rules="deliveryRules" label-width="110px" label-position="left">
<el-form-item label="Order ID" prop="order_id">
<el-select v-model="deliveryInfo.order_id" placeholder="Select an Order ID" style="width: 100%; margin-left: 0px;" >
<el-option
v-for="item in order_id"
:key="item.id"  
:label="item.order_id"
:value="item.order_id">
<span style="float: left">{{ item.order_id }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Box Number" prop="box_number">
<el-select v-model="deliveryInfo.box_number" placeholder="Default: Box 1" style="width: 100%; margin-left: 0px;" >
<el-option
v-for="item in box_options"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button style="width: 100%;" type="primary" @click="onSubmit">Confirm</el-button> 
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="12">
<div class="info-wrapper">
<div class="header"><center>Medications Delivery Status</center></div>
<el-table
:data="list"
stripe
style="width: 100%"
:cell-style="{ textAlign: 'left' }"		 
:header-cell-style="{textAlign: 'left'}">
<el-table-column
prop="job_id"
label="Job ID"
width="120">
</el-table-column>
<el-table-column
prop="order_id"
label="Order ID"
width="150">
</el-table-column>
<el-table-column
prop="ward_number"
label="Ward No."
width="80">
</el-table-column>
<el-table-column
prop="status"
label="Status"
width="90">
</el-table-column>
<el-table-column
prop="recorded_date"
label="Date Assigned"
width="110">
</el-table-column>
<el-table-column
prop="recorded_time"
label="Time Assigned"
width="110">
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
{% endverbatim %}
<script>
new Vue({
el: '#app2',
data() {
return {
list: [],
addDeliveryFormType: 1,
userInfo: {
user_id: '',
patient_id: ''
},
deliveryInfo: {
order_id: '',
ward_number: '',
},
deliveryRules: {
order_id: [{ required: true, message: 'Please enter select the Order ID', trigger: 'blur' }],
box_number: [{ required: true, message: 'Please select a box number', trigger: 'blur' }],
},
box_options: [{
value: '1',
label: 'Box 1'
}, {
value: '2',
label: 'Box 2'
}, {
value: '3',
label: 'Box 3'
}, {
value: '4',
label: 'Box 4'
}, {
value: '5',
label: 'Box 5'
}, {
value: '6',
label: 'Box 6'
}, {
value: '7',
label: 'Box 7'
}],
order_id: []
}
},
mounted() {
this.getDeliveryList() // A function in methods. Purpose: To get the list of uncompleted medications delivery statuses
this.getOrderIDList()
},
methods: {
getOrderIDList() {
axios.post(ToDJ('OrderIDList'), new URLSearchParams()).then(res => {
if (res.data.code === 0) {
this.order_id = res.data.data
} else {
this.NotifyFail(res.data.data)
}
})
},
// To track the delivery of medications that is not completed
getDeliveryList() {
axios.post(ToDJ("deliveryList"), new URLSearchParams()).then(res => {
if (res.data.code === 0) {
this.list = res.data.data
} else {
this.NotifyFail(res.data.data)
}
})
},
// Once SUBMIT BUTTON is pressed
onSubmit() {
this.$refs.deliveryInfoForm.validate((valid) => {
if (valid) {
if (this.addDeliveryFormType === 1) {
axios.post(ToDJ('deliveryJob'), new URLSearchParams(this.deliveryInfo)).then(res => {
if (res.data.code === 0) {
this.NotifySuc("Job Sumitted!")
this.deliveryInfoForm = true
Object.assign(this.deliveryInfo, this.$options.data().deliveryInfo)
this.getDeliveryList()
this.getOrderIDList()
} else {
this.NotifyFail(res.data.data)
Object.assign(this.deliveryInfo, this.$options.data().deliveryInfo)
}
})
}
}
})
},
// Success Notification
NotifySuc(str) {
this.$message({
message: str,
type: 'success'
})
},
// Error Notification
NotifyFail(str) {
this.$message({
message: str,
type: 'warning'
})
},
// Format time
formateTime(oriDate) {
if (!oriDate) {
return ''
}
const formateDate = new Date(oriDate)
const year =  formateDate.getFullYear()
const month =  formateDate.getMonth() + 1
const day = formateDate.getDate()
let h = formateDate.getHours()
let m = formateDate.getMinutes()
let s = formateDate.getSeconds()
h = h >= 10 ? h : `0${h}`
m = m >= 10 ? m : `0${m}`
s = s >= 10 ? s : `0${s}`
return `${year}-${month}-${day} ${h}:${m}`
}
}
})
</script>
{% endblock %}

Start the {% verbatim %} *after the CSRF token:

{% csrf_token %}
{% verbatim %}
...
{% endverbatim %}