New customized theme

serial number in item table, title on top center with top bottom border and if logo not set than company name show below title.

{{ title }}
{% if business.logo != null %}{%else%}{% endif %}
{{ business.name }}
{{ business.name }}
{{ business.address | newline_to_br }}
{{ business.identifier }}
{{ recipient.name }} {{ recipient.code }}
{{ recipient.address | newline_to_br }}
{{ recipient.identifier }}
{% for field in fields %}
{{ field.label }}
{{ field.text }}
{% endfor %}
                <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
            </td>
        </tr>
        <tr>
            <td style="font-weight: bold; padding: 5px 10px; text-align: center; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px; width: 1px">Sr.</td>
            {% for column in table.columns %}            
            <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in table.rows %}
        <tr>
            <td style="padding: 5px 10px; text-align: center; border-left-width: 1px; width: 1px">{{ forloop.index0 | plus:1 }}</td>
            {% for cell in row.cells %}
            <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
        <tr>
        <td style="border-bottom-width: 1px; border-left-width: 1px">&nbsp;</td>
        {% for column in table.columns %}            
            <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}">&nbsp;</td>
        {% endfor %}
        </tr>
        {% for total in table.totals %}
        <tr>
            <td colspan="{{ table.columns | size }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
            <td style="border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
        </tr>
        {% endfor %}

        {% for field in custom_fields %}
        <tr>
            <td colspan="99">
                <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
                <div>{{ field.text | newline_to_br }}</div>
            </td>
        </tr>
        {% endfor %}

        {% if emphasis.text != null and emphasis.positive %}
        <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
        {% endif %}

        {% if emphasis.text != null and emphasis.negative %}
        <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
        {% endif %}
            
    </tbody>
</table>

this doesn’t work.